Skip to content

Commit

Permalink
ui changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@chsakell
chsakell committed Aug 21, 2019
1 parent 0f9da79 commit 8b4f2df
Show file tree
Hide file tree
Showing 10 changed files with 159 additions and 69 deletions.
14 changes: 14 additions & 0 deletions AspNetCoreIdentity/ClientApp/app/components/app/app.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,18 @@
.body-content {
padding-top: 50px;
}
}

.navbar-default {
box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
border-bottom: 1px solid #d4dadf;
background-color: #FFFFFF;
}

.navbar-default .navbar-nav > li > a {
color: #3884FE !important;
}

.container-fluid.content {
margin-top: 50px;
}
30 changes: 29 additions & 1 deletion AspNetCoreIdentity/ClientApp/app/components/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,32 @@
<div class='container-fluid'>
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
chsakell's Blog
</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse" data-toggle="collapse" data-target="#navbarCollapse">
<ul class="nav navbar-nav">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Source-code</a></li>
</ul>
</div>
</div>
</nav>

<div class='container-fluid content'>
<div class='row'>
<div class='col-sm-3'>
<nav-menu></nav-menu>
Expand Down
1 change: 0 additions & 1 deletion ...eIdentity/ClientApp/app/components/claims/access-forbidden/access-forbidden.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.center {text-align: center; margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: auto;}

.forbidden {
color: whitesmoke;
padding-bottom: 70px;
}
3 changes: 1 addition & 2 deletions AspNetCoreIdentity/ClientApp/app/components/claims/claims.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
.claims {
padding-top: 90px;
word-wrap: break-word;
}

.claimType {
color: #a94442;
color: rgb(56, 132, 254);
}
9 changes: 6 additions & 3 deletions AspNetCoreIdentity/ClientApp/app/components/claims/claims.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
<div class="claims">
<div class="row">
<div class="col-md-12 text-center">
<h3>User account claims</h3>
</div>
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="text-center">
<strong>{{userName}}</strong> claims:
<strong>{{userName}}</strong>
</div>
</div>
<div class="panel-body">
Expand All @@ -13,9 +16,9 @@
<div *ngFor="let claim of claims">
Type:
<strong class="claimType">{{claim.type}}</strong>
<br /> Value:
<br/> Value:
<span>{{claim.value}}</span>
<hr />
<hr/>
</div>
</div>
</div>
Expand Down
28 changes: 19 additions & 9 deletions AspNetCoreIdentity/ClientApp/app/components/navmenu/navmenu.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,16 @@ li .glyphicon {
margin-right: 10px;
}

.navbar-inverse .navbar-nav > li > a {
color: #5C6975;
}

/* Highlighting rules for nav menu items */
.navbar-inverse .navbar-nav > li > a:hover,
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
background-color: #a94442;
color: white;
background: rgb(230, 236, 241);
}

/* Keep the nav menu independent of scrolling and on top of other items */
Expand All @@ -24,9 +28,8 @@ li.link-active a:focus {
}

.navbar-inverse {
background-color: #333333;
background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
;
background: #F5F7F9;
border-right: 1px solid #E6ECF1;
}

@media (min-width: 768px) {
Expand All @@ -35,30 +38,37 @@ li.link-active a:focus {
height: 100%;
width: calc(25% - 20px);
}

.navbar {
border-radius: 0px;
border-width: 0px;
height: 100%;
}

.navbar-header {
float: none;
}

.navbar-collapse {
border-top: 1px solid #444;
padding: 0px;
}

.navbar ul {
float: none;
}

.navbar li {
float: none;
font-size: 15px;
margin: 6px;
}
.navbar li a {
padding: 10px 16px;
border-radius: 4px;
}

.navbar li a {
padding: 10px 16px;
border-radius: 4px;
}

.navbar a {
/* If a menu item's text is too long, truncate it */
width: 100%;
Expand Down
4 changes: 0 additions & 4 deletions AspNetCoreIdentity/ClientApp/app/components/streaming/add/add-video.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.add-video {
padding-top: 90px;
}

label.trial {
color: whitesmoke;
}
Expand Down
73 changes: 38 additions & 35 deletions AspNetCoreIdentity/ClientApp/app/components/streaming/add/add-video.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,47 @@
<div class="row add-video">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row text-center">
Add New Video
</div>
<div class="col-md-12 text-center">
<h3>Add YouTube video to registered category</h3>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row text-center">
Add New Video
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form id="register-form" method="post" role="form">
<div class="form-group">
<input type="text" name="title" id="title" [(ngModel)]="newVideo.title" tabindex="1" class="form-control" placeholder="Title"
value="">
</div>
<div class="form-group">
<input type="text" name="description" id="description" [(ngModel)]="newVideo.description" tabindex="2" class="form-control"
placeholder="Description" value="">
</div>
<div class="form-group">
<input type="text" name="url" id="url" [(ngModel)]="newVideo.url" tabindex="3" class="form-control" placeholder="Embed URL from YouTube"
value="">
</div>
<div class="form-group">
<select class="selectpicker" name="category" [(ngModel)]="newVideo.category">
<option *ngFor="let category of categories">{{category.category}}</option>
</select>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="text" name="register-submit" id="register-submit" (click)="addVideo()" class="form-control btn"
value="Save">
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form id="register-form" method="post" role="form">
<div class="form-group">
<input type="text" name="title" id="title" [(ngModel)]="newVideo.title" tabindex="1" class="form-control" placeholder="Title"
value="">
</div>
<div class="form-group">
<input type="text" name="description" id="description" [(ngModel)]="newVideo.description" tabindex="2" class="form-control"
placeholder="Description" value="">
</div>
<div class="form-group">
<input type="text" name="url" id="url" [(ngModel)]="newVideo.url" tabindex="3" class="form-control" placeholder="Embed URL from YouTube"
value="">
</div>
<div class="form-group">
<select class="selectpicker" name="category" [(ngModel)]="newVideo.category">
<option *ngFor="let category of categories">{{category.category}}</option>
</select>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="text" name="register-submit" id="register-submit" (click)="addVideo()" class="form-control btn"
value="Save">
</div>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
8 changes: 2 additions & 6 deletions AspNetCoreIdentity/ClientApp/app/components/streaming/register/register.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@

.list-group-item.active {
background-color: #a94442 !important;
border-color: #a94442 !important;
}

.streaming-section {
padding-top: 50px;
background-color: #3884FE !important;
border-color: #3884FE !important;
}

.registered, .list-group-item .registered {
Expand Down
58 changes: 50 additions & 8 deletions AspNetCoreIdentity/wwwroot/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,35 @@
}

html, body {
background-color: #333333;
background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
background-color: #fff;
min-height: 100vh;
color: whitesmoke !important;
color: #242A31 !important;
}

.panel-primary {
background-color: #333333;
background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
border-color: #8a6d3b !important;
box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px !important;
align-items: center !important;
justify-self: stretch !important;
flex-direction: row !important;
background-color: rgb(255, 255, 255) !important;
-webkit-box-align: center !important;
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
border-width: 1px !important;
border-style: solid !important;
border-color: rgb(230, 236, 241) !important;
border-image: initial !important;
margin: 0px !important;
padding: 0px !important;
border-radius: 3px !important;
text-decoration: none !important;
transition: border 250ms ease 0s !important;
}

.panel-primary > .panel-heading {
color: #fff;
background-color: #a94442 !important;
border-color: #a94442 !important;
background-color: #3884FE !important;
border-color: #3884FE !important;
}


Expand Down Expand Up @@ -82,10 +95,39 @@ html, body {
background-color: #a94442;
}

.btn {
color: rgb(36, 42, 49) !important;
position: relative !important;
align-self: stretch !important;
box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px !important;
align-items: center !important;
justify-self: stretch !important;
flex-direction: row !important;
background-color: rgb(255, 255, 255) !important;
-webkit-box-align: center !important;
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
border-width: 1px !important;
border-style: solid !important;
border-color: rgb(230, 236, 241) !important;
border-image: initial !important;
margin: 0px !important;
padding: 0px !important;
border-radius: 3px !important;
text-decoration: none !important;
transition: border 250ms ease 0s !important;
}

.btn:hover {
color: rgb(56, 132, 254) !important;
border-color: rgb(56, 132, 254) !important;
}

.btn-danger {
background-color: #a94442 !important;
border-color: #a94442 !important;
}

.alert-danger {
color: whitesmoke !important;
background-color: #a94442 !important;
Expand Down

0 comments on commit 8b4f2df

Please sign in to comment.