Skip to content

U
ulakbus-ui
Commit 9ec7cbbd authored by Evren Kutar's avatar Evren Kutar
Browse files
Options

Merge branch 'mergedesign' into Feature/#143/Formsets

parents a49cd6c0 c9a9da66
Hide whitespace changes
Inline Side-by-side
Showing with 363 additions and 107 deletions
app/app.css
View file @ 9ec7cbbd
/* Space out content a bit */ /* Space out content a bit */
body { body {
font-family:'robotoregular'; font-family:'robotoregular';
background-color: #222d32; background-color: #f5f5f5;
overflow:hidden; overflow:hidden;
} }
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background-color:#ccc;
}
::-webkit-scrollbar-thumb {
background-color:#999;
}
.form-control {
box-shadow:none;
border-radius:0;
border-color:#ececec;
}
.btn {
border:none;
}
.btn:focus, .btn:focus,
.btn:active:focus, .btn:active:focus,
.btn.active:focus, .btn.active:focus,
...@@ -39,8 +62,8 @@ a:hover { ...@@ -39,8 +62,8 @@ a:hover {
.logo img { .logo img {
width: 80%; width: 80%;
margin-left: 8%; margin-left: 8%;
margin-top: 23px; margin-top: 22px;
margin-bottom: 23px; margin-bottom: 22px;
} }
/* Everything but the jumbotron gets side spacing for mobile first views */ /* Everything but the jumbotron gets side spacing for mobile first views */
...@@ -148,13 +171,12 @@ ul.header-menu li a:hover{ ...@@ -148,13 +171,12 @@ ul.header-menu li a:hover{
} }
.sidebar .nav>li ul { .sidebar .nav>li ul {
border-bottom: 3px solid #E4E4E4;
border-left: 3px solid #A61229; border-left: 3px solid #A61229;
} }
.sidebar .nav>li ul>li a { .sidebar .nav>li ul>li a {
font-family:'robotoregular'; font-family:'robotoregular';
background-color:#f5f5f5; background-color:#fdfdfd;
} }
.nav>li>a:visited { .nav>li>a:visited {
...@@ -162,7 +184,7 @@ ul.header-menu li a:hover{ ...@@ -162,7 +184,7 @@ ul.header-menu li a:hover{
.nav>li.active>a { .nav>li.active>a {
text-decoration: none; text-decoration: none;
background-color: #f5f5f5; background-color: #fdfdfd;
color: #565656; color: #565656;
border-color:#A61229; border-color:#A61229;
} }
...@@ -309,7 +331,6 @@ select { ...@@ -309,7 +331,6 @@ select {
.sidebar { .sidebar {
background-color:#fff; background-color:#fff;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
overflow:auto;
} }
.sidebar .sidebar-nav.navbar-collapse { .sidebar .sidebar-nav.navbar-collapse {
...@@ -712,6 +733,121 @@ table.dataTable thead .sorting:after { ...@@ -712,6 +733,121 @@ table.dataTable thead .sorting:after {
margin-top: 5px; margin-top: 5px;
} }
/* PERSONNEL INFO */
.generic-profile-picture img {
width:220px;
height:220px;
}
.personnel-info-container {
width:1000px;
height:530px;
margin-left:auto;
margin-right:auto;
margin-bottom:50px;
background-color:#fff;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.1);
box-shadow: 0 0 3px rgba(0,0,0,0.1);
background-color:#fff;
position:relative;
}
.personnel-info-left {
width:250px;
height:100%;
background-color:#fcfcfc;
padding:15px;
position:absolute;
left:0;
overflow-y: auto;
overflow-x: hidden;
border-right: 1px solid #F7F7F7;
}
.personnel-info-left ul {
padding:0;
margin-top:20px;
}
.personnel-info-left ul li {
list-style:none;
margin-bottom:15px;
position:relative;
padding-left:30px;
color:#555;
}
.personnel-info-left ul li:nth-child(1) {
padding:0;
font-family:'robotobold';
font-size:18px;
color:#333;
}
.personnel-info-left ul li:nth-child(2) {
padding:0;
font-family:'robotomedium';
font-size:17px;
color:#666;
}
.personnel-info-left ul li i.fa {
width:18px;
margin-right:15px;
font-size:18px;
position:absolute;
left:0;
text-align:center;
}
.personnel-info-right {
width:750px;
height:100%;
background-color:#fff;
padding:40px;
padding-top:15px;
position:absolute;
right:0;
overflow-y:auto;
}
.personnel-info-right h2 {
margin-top:0;
margin-bottom:20px;
font-family:'robotolight';
font-size:23px;
}
.info-block {
margin-bottom:70px;
}
.info-block:last-child {
margin-bottom:0px;
}
.info-block-body dt {
text-align:left;
font-family:'robotomedium';
font-weight:normal;
}
.info-block-body dl {
margin-bottom:10px;
color:#444;
}
.personnel-info-edit .personnel-info-left ul li {
padding-left:0;
}
/* END OF PERSONNEL INFO */
/* Responsive: Portrait tablets and up */ /* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
/* Remove the padding we set earlier */ /* Remove the padding we set earlier */
...@@ -791,4 +927,70 @@ table.dataTable thead .sorting:after { ...@@ -791,4 +927,70 @@ table.dataTable thead .sorting:after {
border-right-width: 14px; border-right-width: 14px;
border-left-width: 0; border-left-width: 0;
} }
}
\ No newline at end of file .brand {
text-align:center;
}
.logo img {
width:200px;
margin-left:0;
}
.manager-view-content {
overflow:inherit;
}
body {
overflow:auto;
}
}
@media (max-width: 1350px) {
.personnel-info-container {
width:700px;
}
.personnel-info-right {
width:450px;
}
}
@media (max-width: 1000px) {
.personnel-info-container {
width:500px;
height:auto;
}
.personnel-info-left {
width:100%;
position:relative;
height:auto;
border:none;
}
.personnel-info-right {
width:100%;
position:relative;
height:auto;
}
.generic-profile-picture,
.personnel-info-left ul li:nth-child(1),
.personnel-info-left ul li:nth-child(2) {
text-align:center;
}
.generic-profile-picture img {
border-radius:100%;
}
}
@media (max-width: 560px) {
.personnel-info-container {
width: 350px;
}
}
app/components/personelinfo/personelinfo.html
View file @ 9ec7cbbd
<div ng-app="ulakbus.personelinfo"> <div ng-app="ulakbus.personelinfo">
<div class="starter-template"> <div class="starter-template">
<!-- table view -->
<table class="table table-bordered" style="background-color:#fff;">
<thead>
<tr>
<th colspan="2">
<label>
<input type="checkbox" style="zoom:1.5; margin:5px 0 0 8px;">
Hepsini Seç2
</label>
</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td width="60">
<label>
<input type="checkbox" style="zoom:1.5; margin:5px 0 0 8px;">
</label>
</td>
<th scope="row" style="text-align:center">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" style="zoom:1.5; margin:5px 0 0 8px;">
</label>
</td>
<th scope="row" style="text-align:center">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" style="zoom:1.5; margin:5px 0 0 8px;">
</label>
</td>
<th scope="row" style="text-align:center">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td width="60">
<label>
<input type="checkbox" style="zoom:1.5; margin:5px 0 0 8px;">
</label>
</td>
<th scope="row" style="text-align:center">4</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" style="zoom:1.5; margin:5px 0 0 8px;">
</label>
</td>
<th scope="row" style="text-align:center">5</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" style="zoom:1.5; margin:5px 0 0 8px;">
</label>
</td>
<th scope="row" style="text-align:center">6</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<!-- end of table view -->
<div class="btn-group"> <div class="personnel-info-container">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <div class="personnel-info-left">
İşlemler <span class="caret"></span> <div class="generic-profile-picture">
</button> <img src="../../img/sample-profile-pic.jpg" />
<ul class="dropdown-menu"> </div>
<li><a href="">İşlem 1</a></li> <ul>
<li><a href="">İşlem 2</a></li> <li>Gökhan Boranalp</li>
<li><a href="">İşlem 3</a></li> <li>Pozisyon</li>
<li role="separator" class="divider"></li> <li><i class="fa fa-phone"></i> (+90) 123 456 7890</li>
<li><a href="">İşlem 4</a></li> <li><i class="fa fa-envelope"></i> samplemail@mail.com</li>
</ul> <li><i class="fa fa-map-marker"></i> Gülbahçe Mah. İzmir Teknoloji Geliştirme Bölgesi A9 Blok 215/A IYTE Campus, URLA/IZMIR</li></li>
</ul>
</div>
<!-- end of personnel-info-left -->
<div class="personnel-info-right">
<div class="info-block">
<div class="info-block-header">
<h2>Kişisel Bilgiler</h2>
</div>
<!-- end of info-block-header -->
<div class="info-block-body">
<dl class="dl-horizontal">
<dt>Ad Soyad</dt>
<dd>Gökhan Boranalp</dd>
</dl>
<dl class="dl-horizontal">
<dt>Cinsiyet</dt>
<dd>Erkek</dd>
</dl>
<dl class="dl-horizontal">
<dt>Doğum Tarihi</dt>
<dd>23/06/1970</dd>
</dl>
<dl class="dl-horizontal">
<dt>İkamet Adresi</dt>
<dd>Gülbahçe Mah. İzmir Teknoloji Geliştirme Bölgesi A9 Blok 215/A IYTE Campus, URLA/IZMIR</dd>
</dl>
</div>
<!-- end of info-block-body -->
</div>
<!-- end of info block -->
<div class="info-block">
<div class="info-block-header">
<h2>İletişim Bilgileri</h2>
</div>
<!-- end of info-block-header -->
<div class="info-block-body">
<dl class="dl-horizontal">
<dt>Ev Telefonu</dt>
<dd>-</dd>
</dl>
<dl class="dl-horizontal">
<dt>Cep Telefonu</dt>
<dd>(+90) 123 456 7890</dd>
</dl>
<dl class="dl-horizontal">
<dt>Mail Adresi</dt>
<dd>gokhan@zetaops.io</dd>
</dl>
<dl class="dl-horizontal">
<dt>Diğer Mail Adresi</dt>
<dd>-</dd>
</dl>
</div>
<!-- end of info-block-body -->
</div>
<!-- end of info block -->
</div>
<!-- personnel-info-left -->
</div> </div>
<!-- end of personnel-info-container -->
<div class="personnel-info-container personnel-info-edit">
<hr> <div class="personnel-info-left">
<div class="generic-profile-picture">
<img src="../../img/sample-profile-pic.jpg" />
</div>
<div style="margin-top:10px; text-align:center;">
<button type="button" class="btn btn-primary">Değiştir</button>
<button type="button" class="btn btn-danger">Sil</button>
</div>
</div>
<!-- end of personnel-info-left -->
<div class="personnel-info-right">
<div class="info-block">
<div class="info-block-header">
<h2>Kişisel Bilgiler</h2>
</div>
<!-- end of info-block-header -->
<div class="info-block-body">
<dl class="dl-horizontal">
<dt>Ad Soyad</dt>
<dd><input type="text" class="form-control" placeholder="Gökhan Boranalp"></dd>
</dl>
<dl class="dl-horizontal">
<dt>Pozisyon</dt>
<dd><input type="text" class="form-control" placeholder="Pozisyon"></dd>
</dl>
<dl class="dl-horizontal">
<dt>Cinsiyet</dt>
<dd>
<select class="form-control">
<option value="male">Erkek</option>
<option value="female">Kadın</option>
</select>
</dd>
</dl>
<dl class="dl-horizontal">
<dt>Doğum Tarihi</dt>
<dd>
<input type="text" class="form-control" placeholder="Angular JS - Bootstrap Date Picker Eklenecek">
</dd>
</dl>
<dl class="dl-horizontal">
<dt>İkamet Adresi</dt>
<dd><input type="text" class="form-control" placeholder="Gülbahçe Mah. İzmir Teknoloji Geliştirme Bölgesi A9 Blok 215/A IYTE Campus, URLA/IZMIR"></dd>
</dl>
</div>
<!-- end of info-block-body -->
</div>
<!-- end of info block -->
<div class="info-block">
<div class="info-block-header">
<h2>İletişim Bilgileri</h2>
</div>
<!-- end of info-block-header -->
<div class="info-block-body">
<dl class="dl-horizontal">
<dt>Ev Telefonu</dt>
<dd><input type="text" class="form-control" placeholder=""></dd>
</dl>
<dl class="dl-horizontal">
<dt>Cep Telefonu</dt>
<dd><input type="text" class="form-control" placeholder="(+90) 123 456 7890 (Phone number mask uygulanacak)"></dd>
</dl>
<dl class="dl-horizontal">
<dt>Mail Adresi</dt>
<dd><input type="text" class="form-control" placeholder="gokhan@zetaops.io"></dd>
</dl>
<dl class="dl-horizontal">
<dt>Diğer Mail Adresi</dt>
<dd><input type="text" class="form-control" placeholder=""></dd>
</dl>
</div>
<!-- end of info-block-body -->
</div>
<!-- end of info block -->
</div>
<!-- personnel-info-left -->
</div>
<!-- end of personnel-info-container -->
</div> </div>
</div> </div>
\ No newline at end of file
app/index.html
View file @ 9ec7cbbd
...@@ -55,6 +55,7 @@ ...@@ -55,6 +55,7 @@
<div class="manager-view-content"> <div class="manager-view-content">
<div class="row"> <div class="row">
<div class="main" ng-view> <div class="main" ng-view>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment