Skip to content

Commit

Permalink
Login/Register Page Styling + Added Home Button to Canvas and Auth Pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@gevalo1
gevalo1 committed Dec 4, 2016
1 parent ad74f69 commit c8a6c4a
Show file tree
Hide file tree
Showing 4 changed files with 223 additions and 113 deletions.
20 changes: 16 additions & 4 deletions client/app/auth/auth.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,19 @@
<div class="auth-page">
<div class="row">

<h1 class="auth-title" ng-bind="::$ctrl.title"></h1>
<div class="auth-header">
<ul>
<li class="nav-item canvas-button">
<a class="nav-link"
ui-sref-active="active"
ui-sref="app.home">
Home
</a>
</li>
<h1 class="auth-title" ng-bind="::$ctrl.title"></h1>
<div class="block"></div>
</ul>

</div>
<p>
<a ui-sref="app.login" ng-show="$ctrl.authType === 'register'">
Have an account?
Expand All @@ -13,7 +25,7 @@ <h1 class="auth-title" ng-bind="::$ctrl.title"></h1>

<p class="auth-error">{{$ctrl.errors}}</p>

<form name="authForm" novalidate ng-submit="$ctrl.submitForm()">
<form name="authForm" novalidate ng-submit="$ctrl.submitForm()" id="authForm">
<fieldset ng-disabled="$ctrl.isSubmitting">

<input class="auth-input"
Expand All @@ -32,7 +44,7 @@ <h1 class="auth-title" ng-bind="::$ctrl.title"></h1>
placeholder="Password"
ng-model="$ctrl.formData.password" required/>

<md-button class="auth-button" type="submit" ng-bind="$ctrl.title" ng-disabled="authForm.$invalid" aria-label="auth"/>
<md-button class="authSubmit md-raised" type="submit" ng-bind="$ctrl.title" ng-disabled="authForm.$invalid" aria-label="auth"/>
</fieldset>
</form>
</div>
Expand Down
51 changes: 30 additions & 21 deletions client/app/canvas/canvas.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,34 @@
<div id="navbar">
<md-button id="colorOptions" class="md-fab icon ion-android-color-palette" aria-label="Change Color"/>
<div id="colorList">
<div id="black" class="color"/>
<div id="white" class="color"/>
<div id="green" class="color"/>
<div id="yellow" class="color"/>
<div id="orange" class="color"/>
<div id="red" class="color"/>
<div id="lightBlue" class="color"/>
<div id="blue" class="color"/>
<div id="purple" class="color"/>
</div>
<div id="customColor">
<label class="customColorLabel">Custom Color</label>
<input class="customColorInput" ng-model="colorModel" placeholder="HEX/Color..." ng-model="customColor">
<md-button id="submitCustomColor" ng-click="submitCustomColor(colorModel)" class="md-fab icon ion-checkmark" aria-label="SubmitCustomColor"/>
</div>
<div class="alert alert-success alertCustom" ng-show="showAlert">
<button type="button" class="close" data-ng-click="switchBool('showAlert')" >×</button>
<strong>{{textTitle}}</strong> {{textAlert}}
</div>
<ul class="canvasNav">
<li class="nav-item canvas-button">
<a class="nav-link"
ui-sref-active="active"
ui-sref="app.home">
Home
</a>
</li>
<md-button id="colorOptions" class="md-fab icon ion-android-color-palette" aria-label="Change Color"/>
<div id="colorList">
<div id="black" class="color"/>
<div id="white" class="color"/>
<div id="green" class="color"/>
<div id="yellow" class="color"/>
<div id="orange" class="color"/>
<div id="red" class="color"/>
<div id="lightBlue" class="color"/>
<div id="blue" class="color"/>
<div id="purple" class="color"/>
</div>
<div id="customColor">
<label class="customColorLabel">Custom Color</label>
<input class="customColorInput" ng-model="colorModel" placeholder="HEX/Color..." ng-model="customColor">
<md-button id="submitCustomColor" ng-click="submitCustomColor(colorModel)" class="md-fab icon ion-checkmark" aria-label="SubmitCustomColor"/>
</div>
<div class="alert alert-success alertCustom" ng-show="showAlert">
<button type="button" class="close" data-ng-click="switchBool('showAlert')" >×</button>
<strong>{{textTitle}}</strong> {{textAlert}}
</div>
</ul>
</div>

<div id="content">
Expand Down
8 changes: 4 additions & 4 deletions client/app/config/app.templates.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

257 changes: 173 additions & 84 deletions client/app/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,93 +66,11 @@ h1, p, ul {
background-color: #575252;
}

select, option {
padding-bottom: 3em;
padding-right: 4.5em;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}

button#changeBrushSize, button#clearCv, button#colorOptions, button#saveDrawing {
background-color: gray !important;
font-size: 35px;
color: #575252 !important;
}
button#submitCustomColor {
background-color: gray !important;
font-size: 14px;
color: #575252 !important;
width: 24px;
min-height: 24px;
height: 24px;
line-height: 24px;
}

#footerText {
color: #CBCACA;
text-align: center;
}

#colorList {
width: 50px;
height: auto;
background-color: gray;
z-index: 2;
display: none;
position: absolute;
top: 5px;
left: 10vh;
}

#black {
background-color: #000000;
}
#white {
background-color: #FFFFFF;
}
#green {
background-color: #22B14C;
}
#yellow {
background-color: #FFF200;
}
#orange {
background-color: #FF7F27;
}
#red {
background-color: #ED1C24;
}
#lightBlue {
background-color: #00A2E8;
}
#blue {
background-color: #3F48CC;
}
#purple {
background-color: #A349A4;
}

.color {
width: 50px;
height: 50px;
cursor: pointer;
}
.color:not(:first-child) {
margin-top: 3px;
}

.alertCustom {
padding: 2px;
border-radius: 4px;
background-color: #e56969;
width: 25%;
float: right;
}

.close{float:right;font-size:20px;font-weight:bold;line-height:20px;color:#000000;text-shadow:0 1px 0 #ffffff;opacity:0.6;filter:alpha(opacity=60);}.close:hover{color:#000000;text-decoration:none;cursor:pointer;opacity:0.4;filter:alpha(opacity=40);}
button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;}

Expand Down Expand Up @@ -282,12 +200,125 @@ h1 {

/* End Home Page */

/* Start Auth Page */

.row {
height: 100%;
text-align: center;
}

.row a {
text-decoration: none;
color: #7F7E7E;
}

.row a:hover {
text-decoration: underline;
}

.auth-header {
width: 100%;
height: 8%;
}
.auth-header ul {
text-align: center;
}
.auth-header ul li {
width: 10%;
}
.auth-header ul li a {
color: white;
}
.auth-header ul li a:hover {
text-decoration: none;
}

.auth-title {
color: #191919;
}

#authForm {
display: block;
width: 30%;
height: auto;
margin: 0 auto;
}

#authForm input {
display: block;
width: 70%;
font-size: 1.1em;
margin: 3em auto;
padding: 1em;
border: 0;
}

#authForm input:focus {
border: 2px solid gray;
}

#authForm fieldset {
border: 0;
}

.authSubmit {
display: block;
width: 70%;
height: 50px;
float: initial;
margin: 0 auto;
}

.block {
width: 10%;
height: 100%;
float: right;
}

/* End Auth Page */

/* Start Canvas Page */

.canvasNav {
text-align: inherit;
}
.canvasNav li {
width: 5%;
text-align: center;
}

select, option {
padding-bottom: 3em;
padding-right: 4.5em;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}

button#changeBrushSize, button#clearCv, button#colorOptions, button#saveDrawing {
background-color: gray !important;
font-size: 35px;
color: #575252 !important;
}
button#submitCustomColor {
background-color: gray !important;
font-size: 14px;
color: #575252 !important;
width: 24px;
min-height: 24px;
height: 24px;
line-height: 24px;
}

#customColor {
display: none;
Width: 10%;
position: absolute;
top: 5px;
left: 20vh;
left: 35vh;
}
.customColorLabel {
color: white;
Expand All @@ -298,4 +329,62 @@ h1 {
background-color: #575252;
color: white;
border: 1px solid gray;
}
}

#colorList {
width: 50px;
height: auto;
background-color: gray;
z-index: 2;
display: none;
position: absolute;
top: 5px;
left: 25vh;
}

#black {
background-color: #000000;
}
#white {
background-color: #FFFFFF;
}
#green {
background-color: #22B14C;
}
#yellow {
background-color: #FFF200;
}
#orange {
background-color: #FF7F27;
}
#red {
background-color: #ED1C24;
}
#lightBlue {
background-color: #00A2E8;
}
#blue {
background-color: #3F48CC;
}
#purple {
background-color: #A349A4;
}

.color {
width: 50px;
height: 50px;
cursor: pointer;
}
.color:not(:first-child) {
margin-top: 3px;
}

.alertCustom {
padding: 2px;
border-radius: 4px;
background-color: #e56969;
width: 25%;
float: right;
}

/* End Canvas Page */

0 comments on commit c8a6c4a

Please sign in to comment.