login page looks more modern now

This commit is contained in:
Suraj Patil 2016-05-14 19:54:31 +05:30
parent 53f720ba34
commit a6d9a109c0
2 changed files with 272 additions and 214 deletions

View File

@ -15,61 +15,76 @@ Layout
-------------------------------------- */ -------------------------------------- */
.commentslist { .commentslist {
background-color: #f5f5f5; background-color: #f5f5f5;
}
.loginbutton {
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
} }
.comment { .comment {
padding-left: 25px; padding-left: 25px;
padding-right: 25px; padding-right: 25px;
padding-top: 15px; padding-top: 15px;
} }
ul{ ul {
list-style-type: none; list-style-type: none;
} }
.timestamp{ .timestamp {
color: #aaa; color: #aaa;
} }
.badge{ .badge {
background-color: #1a78c9; background-color: #1a78c9;
margin-right:10px; margin-right: 10px;
float:right; float: right;
} }
.center{ .center {
text-align:center; text-align: center;
} }
.navbar-brand:hover{ .navbar-brand:hover {
color:white; color: white;
} }
.footer{ .footer {
height:30px; height: 30px;
width:auto; width: auto;
text-align:center; text-align: center;
} }
textarea { textarea {
resize: vertical; resize: vertical;
} }
.floating-action-icon{ .floating-action-icon {
position: fixed; position: fixed;
bottom:40px; bottom: 40px;
right:30px; right: 30px;
z-index:101; z-index: 101;
width: 56px; width: 56px;
height: 56px; height: 56px;
font-size: 20px; font-size: 20px;
border-radius: 35px; border-radius: 35px;
box-shadow:0 0 4px #111; box-shadow: 0 0 4px #111;
padding-top:10px !important; padding-top: 10px !important;
} }
.notification{ .notification {
width: -moz-fit-content; width: -moz-fit-content;
position: fixed; position: fixed;
right: 10px; right: 10px;
@ -87,326 +102,330 @@ textarea {
} }
#btnMessage { #btnMessage {
padding: 1px 12px; padding: 1px 12px;
height: 30px; height: 30px;
text-align: center; text-align: center;
float: right; float: right;
} }
/*-------------------------------------- /*--------------------------------------
Navbar Navbar
-------------------------------------- */ -------------------------------------- */
.mainHeader{ .mainHeader {
background-color: #3f51b5; background-color: #3f51b5;
border-radius:0px; border-radius: 0px;
} }
.navbar-brand{ .navbar-brand {
margin-left: 25px; margin-left: 25px;
font-size:1.5em; font-size: 1.5em;
color:white; color: white;
max-width: 2000px; max-width: 2000px;
} }
.btn-action{ .btn-action {
background-color: #3f51b5; background-color: #3f51b5;
} }
#icons{ #icons {
text-align:right; text-align: right;
float: right; float: right;
height: 50%; height: 50%;
line-height: 52px; line-height: 52px;
float:right; float: right;
margin-top: 10px; margin-top: 10px;
} }
nav .glyphicon{ nav .glyphicon {
color:white; color: white;
} }
nav .glyphicon:hover{ nav .glyphicon:hover {
color:black; color: black;
} }
.sr-only{ .sr-only {
display:block; display: block;
width:20px; width: 20px;
height:3px; height: 3px;
background-color: white; background-color: white;
margin-bottom: 4px; margin-bottom: 4px;
} }
.hidden{ .hidden {
display:none; display: none;
} }
/*-------------------------------------- /*--------------------------------------
NotesFeed NotesFeed
-------------------------------------- */ -------------------------------------- */
.overdue { .overdue {
color: red; color: red;
margin-top: 1px; margin-top: 1px;
font-size: 12px; font-size: 12px;
padding-top: -100px; padding-top: -100px;
position: absolute; position: absolute;
padding-left: 5px; padding-left: 5px;
} }
.noteHeading { .noteHeading {
font-weight:900; font-weight: 900;
font-size:17px; font-size: 17px;
color:#666666; color: #666666;
margin-bottom:0px; margin-bottom: 0px;
padding-bottom:5px; padding-bottom: 5px;
} }
hr{
margin: 0;
padding: 0;
hr {
margin: 0;
padding: 0;
} }
.noteHeading a { .noteHeading a {
font-weight:400; font-weight: 400;
font-size:11px; font-size: 11px;
} }
.noteContent { .noteContent {
padding-top: 7px; padding-top: 7px;
font-size: 0.9em; font-size: 0.9em;
display: none; display: none;
} }
.noteContent img { .noteContent img {
width: 90%; width: 90%;
padding-left: 10%; padding-left: 10%;
} }
.toggle{ .toggle {
cursor: pointer; cursor: pointer;
margin-top:-30px; margin-top: -30px;
float:right; float: right;
} }
.notefooter{ .notefooter {
color:#aaa; color: #aaa;
height: 20px; height: 20px;
} }
/* These are the classes that are going to be applied: */ /* These are the classes that are going to be applied: */
.column { .column {
float: left; float: left;
} }
.note{ .note {
display: block; display: block;
margin: 4px; margin: 4px;
margin-bottom: 6px; margin-bottom: 6px;
padding: 15px; padding: 15px;
background-color: white; background-color: white;
box-shadow:1px 1px 2px 1px #7D7470; box-shadow: 1px 1px 2px 1px #7D7470;
border-radius:4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
height: auto; height: auto;
} }
.note:hover{ .note:hover {
border-bottom: 2px solid black; border-bottom: 2px solid black;
} }
.menu a { .menu a {
text-decoration: none; text-decoration: none;
} }
.menu li{
margin-top: -10px; .menu li {
list-style: none; margin-top: -10px;
float: right; list-style: none;
padding: 5px; float: right;
height: 15px; padding: 5px;
height: 15px;
} }
/*-------------------------------------- /*--------------------------------------
Navigation drawer Navigation drawer
-------------------------------------- */ -------------------------------------- */
.list-group-item{ .list-group-item {
border:none; border: none;
} }
.sidebar-item h5{ .sidebar-item h5 {
margin-left:15px; margin-left: 15px;
display: block; display: block;
} }
.sidebar-item .glyphicon:hover{ .sidebar-item .glyphicon:hover {
color:black; color: black;
} }
.col-sm-2 a.list-group-item:hover,
.col-sm-2 a.list-group-item:hover,a.list-group-item:focus{ a.list-group-item:focus {
text-decoration:none; text-decoration: none;
background-color: transparent; background-color: transparent;
} }
body{ body {
background-color: #f5f5f5; background-color: #f5f5f5;
overflow-x:hidden; overflow-x: hidden;
overflow-y:auto; overflow-y: auto;
margin-top:70px; margin-top: 70px;
} }
.nav-item{ .nav-item {
padding-left: 10px; padding-left: 10px;
} }
.col-sm-2{ .col-sm-2 {
background-color: white; background-color: white;
} }
.badge{ .badge {
background-color: #7D8EF0; background-color: #7D8EF0;
margin-right:10px; margin-right: 10px;
float:right; float: right;
} }
/* -------------------------------------- /* --------------------------------------
Global Styles Global Styles
-------------------------------------- */ -------------------------------------- */
body{
width:100%; body {
width: 100%;
} }
.main-content{ .main-content {
color:black; color: black;
} }
.highlight{ .highlight {
background-color: #72CBFF; background-color: #72CBFF;
} }
/* -------------------------------------- /* --------------------------------------
Media Queries Media Queries
-------------------------------------- */ -------------------------------------- */
/* Portrait & landscape phone */
@media (max-width: 480px) {
body{
margin-top:105px;
}
.timeline { /* Portrait & landscape phone */
@media (max-width: 480px) {
body {
margin-top: 105px;
}
.timeline {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
} }
#icons {
#icons{ text-align: center;
text-align:center; padding: 0;
padding:0;
height: 50%; height: 50%;
line-height: 52px; line-height: 52px;
float:right; float: right;
margin-top: 10px; margin-top: 10px;
} }
.mainHeader h3 {
.mainHeader h3{ padding: 0px;
padding:0px; text-align: center;
text-align:center;
} }
.note-sm {
height: 150px;
.note-sm{
height:150px;
} }
.floating-action-icon {
.floating-action-icon{
position: fixed; position: fixed;
bottom:35px; bottom: 35px;
right:20px; right: 20px;
z-index:101; z-index: 101;
width: 50px; width: 50px;
height: 50px; height: 50px;
padding: 10px 10px; padding: 10px 10px;
font-size: 24px; font-size: 24px;
border-radius: 25px; border-radius: 25px;
text-align:center; text-align: center;
} }
.modal-dialog {
.modal-dialog{ width: 240px;
width:240px;
} }
} }
/* Landscape phone to portrait tablet */ /* Landscape phone to portrait tablet */
@media (max-width: 768px) and (min-width:481px) { @media (max-width: 768px) and (min-width:481px) {
#icons{ #icons {
text-align:center; text-align: center;
padding:0; padding: 0;
height: 50%; height: 50%;
line-height: 52px; line-height: 52px;
float:right; float: right;
margin-top: 10px; margin-top: 10px;
} }
body {
margin-top: 105px;
body{
margin-top:105px;
} }
.timeline { .timeline {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
}
.mainHeader h3{
padding:0px;
text-align:center;
} }
.mainHeader h3 {
.note-lg{ padding: 0px;
height:360px; text-align: center;
}
.note-lg {
height: 360px;
/*change later*/ /*change later*/
} }
.modal-dialog{ .modal-dialog {
width:250px; width: 250px;
} }
} }
/* Large desktop */ /* Large desktop */
@media (max-width: 1400px) and (min-width:769px) { @media (max-width: 1400px) and (min-width:769px) {
.timeline { .timeline {
overflow: hidden; overflow: hidden;
width: 55%; width: 55%;
margin-left:20%; margin-left: 20%;
}
} }
}
/*-------------------------------------- /*--------------------------------------
Sidebar Sidebar
-------------------------------------- */ -------------------------------------- */
.sidebar-toggle{
left:10px !important; .sidebar-toggle {
left: 10px !important;
} }
.sidebar-wrapper.sidebar-default.sidebar-open, .sidebar-wrapper.sidebar-default.sidebar-dragging{
width:260px; .sidebar-wrapper.sidebar-default.sidebar-open,
.sidebar-wrapper.sidebar-default.sidebar-dragging {
width: 260px;
} }
/*Modal dialog*/ /*Modal dialog*/
.modal-footer { .modal-footer {
padding: 10px 15px 15px; padding: 10px 15px 15px;
margin:0; margin: 0;
border:none; border: none;
} }
.modal-body{ .modal-body {
padding: 20px 20px 10px 20px; padding: 20px 20px 10px 20px;
} }
.modal{ .modal {
overflow: hidden; overflow: hidden;
} }

View File

@ -1,36 +1,75 @@
<div class="timeline"> <!DOCTYPE html>
<div class="note"> <html>
Login
<form action="/login/" method="POST"> <head>
<title> Welcome to Tasks, login or sign up
</title>
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/static/css/styles.css" rel="stylesheet">
<link href="/static/css/sidebar.css" rel="stylesheet">
<link href="/static/css/sidebar-bootstrap.css" rel="stylesheet">
<link href="/static/css/font-awesome.min.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<!--<script src="/static/js/modernizr-2.6.2.min.js"></script>-->
<!-- All Javascript at the bottom of the page for faster page loading -->
<script src="/static/js/jquery.min.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery
<script>window.jQuery || document.write('<script src="/static/js/jquery-1.8.2.min.js"><\/script>')</script>
-->
<!-- Bootstrap JS -->
<script src="/static/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="/static/js/script.js"></script>
<script src="/static/js/hammer.min.js"></script>
<script src="/static/js/sidebar.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top mainHeader">
<div class="container-fluid">
<div class="navbar-header">
<p class="navbar-brand" href="/">Tasks</p>
</div>
</div>
</nav>
<div class="timeline">
<div class="note">
<p class="noteHeading ">Login </p>
<div class="form-group"> <div class="form-group">
<input type="text" name="username" class="form-control" placeholder="Username" /> <form action="/login/" method="POST">
<input type="password" name="password" class="form-control" placeholder="Password" /> <input type="text" name="username" class="loginbutton" placeholder="Username" />
<input type="password" name="password" class="loginbutton" placeholder="Password" />
<input type="submit" value="Submit" class="btn btn-primary" />
</form>
</div> </div>
</div>
<div class="modal-footer"> <div class="note">
<input type="submit" value="Submit" class="btn btn-primary" id="addNoteBtn" /> <p class="noteHeading ">Sign up </p>
<div class="form-group">
<form action="/signup/" method="POST">
<input type="text" name="username" class="loginbutton" placeholder="Username" />
<input type="password" name="password" class="loginbutton" placeholder="Password" />
<input type="email" name="email" class="loginbutton" placeholder="demo@demo.com" />
<input type="submit" value="Submit" class="btn btn-primary" />
</form>
</div> </div>
</form> </div>
</div> </div>
<div class="note"> {{template "_footer.html"}}
Sign up
<form action="/signup/" method="POST">
<div class="form-group">
<input type="text" name="username" class="form-control" placeholder="Username" />
<input type="password" name="password" class="form-control" placeholder="Password" />
<input type="email" name="email" class="form-control" placeholder="demo@demo.com" />
</div>
<div class="modal-footer">
<input type="submit" value="Submit" class="btn btn-primary" id="addNoteBtn" />
</div>
</form>
</div>
</div>
{{template "footer.html"}}
</body> </body>