front end for Unioil CMS done.
This commit is contained in:
parent
21adb9364f
commit
00d3c3f826
|
|
@ -205,7 +205,7 @@ code,
|
|||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,52 +1,62 @@
|
|||
|
||||
@import url('https://fonts.googleapis.com/css?family=Nova+Slim&display=swap');
|
||||
|
||||
body, html {
|
||||
line-height: 1.8;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: #555e58;
|
||||
text-transform:capitalize;
|
||||
text-rendering: optimizeLegibility !important;
|
||||
-webkit-font-smoothing: antialiased !important;
|
||||
font-weight: 400;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
body,
|
||||
html {
|
||||
line-height: 1.8;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
color: #555e58;
|
||||
text-transform: capitalize;
|
||||
text-rendering: optimizeLegibility !important;
|
||||
-webkit-font-smoothing: antialiased !important;
|
||||
font-weight: 400;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4 {
|
||||
font-weight: 400;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
margin: 12px 0 0;
|
||||
line-height: 24px;
|
||||
font-size: 15px;
|
||||
margin: 12px 0 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
a{
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
a {
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
button:focus{
|
||||
box-shadow:none;
|
||||
outline:none;
|
||||
border:none;
|
||||
button:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button{
|
||||
cursor:pointer;
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding: 0;
|
||||
margin:0px;
|
||||
list-style: none;
|
||||
ul,
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: 0px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -66,41 +76,43 @@ a:focus {
|
|||
==================================================*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
|
||||
src: local('Material Icons'),
|
||||
local('MaterialIcons-Regular'),
|
||||
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
|
||||
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
|
||||
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://example.com/MaterialIcons-Regular.eot);
|
||||
/* For IE6-8 */
|
||||
src: local('Material Icons'),
|
||||
local('MaterialIcons-Regular'),
|
||||
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
|
||||
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
|
||||
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
|
||||
}
|
||||
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
/* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
/*=======================================================
|
||||
|
|
@ -110,9 +122,9 @@ a:focus {
|
|||
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
width:100%;
|
||||
overflow:auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -126,71 +138,73 @@ a:focus {
|
|||
|
||||
|
||||
#sidebar {
|
||||
position:fixed;
|
||||
height:100vh!important;
|
||||
position: fixed;
|
||||
height: 100vh !important;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index:11;
|
||||
z-index: 11;
|
||||
width: 260px;
|
||||
overflow:auto;
|
||||
transition:all 0.3s ;
|
||||
overflow: auto;
|
||||
transition: all 0.3s;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 10px 30px -12px rgb(0 0 0 / 42%), 0 4px 25px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
|
||||
#sidebar::-webkit-scrollbar{
|
||||
width:5px;
|
||||
border-radius:10px;
|
||||
background-color:#eee;
|
||||
display:none;
|
||||
#sidebar::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
border-radius: 10px;
|
||||
background-color: #eee;
|
||||
display: none;
|
||||
}
|
||||
#sidebar::-webkit-scrollbar-thumbs{
|
||||
width:5px;
|
||||
border-radius:10px;
|
||||
background-color:#333;
|
||||
display:none;
|
||||
|
||||
#sidebar::-webkit-scrollbar-thumbs {
|
||||
width: 5px;
|
||||
border-radius: 10px;
|
||||
background-color: #333;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#sidebar:hover::-webkit-scrollbar{
|
||||
display:block;
|
||||
#sidebar:hover::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
#sidebar:hover::-webkit-scrollbar-thumbs{
|
||||
display:block;
|
||||
|
||||
#sidebar:hover::-webkit-scrollbar-thumbs {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidebar .sidebar-header {
|
||||
padding:20px;
|
||||
background-color:#ffffff;
|
||||
border-bottom:1px solid #eee;
|
||||
padding: 20px;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.sidebar-header h3{
|
||||
color:#333;
|
||||
font-size:17px;
|
||||
margin:0px;
|
||||
text-transform:uppercase;
|
||||
transition:all 0.5s ease;
|
||||
font-weight:600;
|
||||
.sidebar-header h3 {
|
||||
color: #333;
|
||||
font-size: 17px;
|
||||
margin: 0px;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.5s ease;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sidebar-header h3 img{
|
||||
width:120px;
|
||||
margin-right:10px;
|
||||
.sidebar-header h3 img {
|
||||
width: 120px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#sidebar ul li{
|
||||
padding:2px 7px;
|
||||
#sidebar ul li {
|
||||
padding: 2px 7px;
|
||||
}
|
||||
|
||||
#sidebar ul li.active>a{
|
||||
#sidebar ul li.active>a {
|
||||
color: #333;
|
||||
background-color: rgba(200, 200, 200, 0.2);
|
||||
}
|
||||
|
||||
#sidebar ul li a:hover{
|
||||
#sidebar ul li a:hover {
|
||||
color: #333;
|
||||
background-color: rgba(200, 200, 200, 0.2);
|
||||
}
|
||||
|
|
@ -201,8 +215,8 @@ a:focus {
|
|||
top: 23px;
|
||||
}
|
||||
|
||||
#sidebar ul li.drodown{
|
||||
position:sticky;
|
||||
#sidebar ul li.drodown {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -212,24 +226,24 @@ a:focus {
|
|||
|
||||
#sidebar ul li a {
|
||||
padding: 10px;
|
||||
line-height: 30px;
|
||||
border-radius:5px;
|
||||
line-height: 30px;
|
||||
border-radius: 5px;
|
||||
font-size: 15px;
|
||||
position:relative;
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidebar ul li a span{
|
||||
text-transform:capitalize;
|
||||
display:inline-block;
|
||||
#sidebar ul li a span {
|
||||
text-transform: capitalize;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#sidebar ul li a i {
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
top: 5px;
|
||||
color: #555555;
|
||||
color: #555555;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -251,27 +265,27 @@ a:focus {
|
|||
|
||||
|
||||
#content {
|
||||
position: relative;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
background-color: #EEEEEE;
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
|
||||
.top-navbar{
|
||||
width:100%;
|
||||
z-index:9;
|
||||
position:relative;
|
||||
.top-navbar {
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.main-content{
|
||||
padding:10px 20px 0px 20px;
|
||||
position: relative;
|
||||
.main-content {
|
||||
padding: 10px 20px 0px 20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.navbar{
|
||||
.navbar {
|
||||
background-color: #2196F3;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
|
@ -280,22 +294,23 @@ a:focus {
|
|||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.navbar button{
|
||||
background-color:transparent;
|
||||
border:none;
|
||||
}
|
||||
.navbar button span{
|
||||
color:#fff;
|
||||
.navbar button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#sidebarCollapse{
|
||||
border-radius:50%;
|
||||
width:45px;
|
||||
height:45px;
|
||||
text-align:center;
|
||||
line-height:45px;
|
||||
margin-right:20px;
|
||||
border:none;
|
||||
.navbar button span {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#sidebarCollapse {
|
||||
border-radius: 50%;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
text-align: center;
|
||||
line-height: 45px;
|
||||
margin-right: 20px;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
background-color: rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
|
|
@ -307,28 +322,28 @@ a:focus {
|
|||
|
||||
|
||||
|
||||
.navbar-nav > li.active{
|
||||
color: #FFFFFF;
|
||||
border-radius:4px;
|
||||
.navbar-nav>li.active {
|
||||
color: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav > li > a {
|
||||
.navbar-nav>li>a {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
.navbar .notification {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
display: block;
|
||||
display: block;
|
||||
font-size: 9px;
|
||||
border: 0px;
|
||||
font-size: 10px;
|
||||
background: #d9534f;
|
||||
min-width: 15px;
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
padding: 1px 5px;
|
||||
height: 15px;
|
||||
border-radius: 2px;
|
||||
|
|
@ -336,23 +351,23 @@ a:focus {
|
|||
}
|
||||
|
||||
|
||||
.navbar-nav > li.show .dropdown-menu {
|
||||
.navbar-nav>li.show .dropdown-menu {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity:1;
|
||||
visibility:visible;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu li > a {
|
||||
.dropdown-menu li>a {
|
||||
font-size: 13px;
|
||||
padding: 10px 20px;
|
||||
margin: 0 5px;
|
||||
border-radius: 2px;
|
||||
font-weight: 400;
|
||||
font-weight: 400;
|
||||
transition: all 150ms linear;
|
||||
}
|
||||
|
||||
.navbar-nav > .active > a:focus {
|
||||
.navbar-nav>.active>a:focus {
|
||||
color: #FFFFFF;
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
|
@ -361,7 +376,7 @@ a:focus {
|
|||
.navbar-nav li a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px!important;
|
||||
padding: 10px 15px !important;
|
||||
}
|
||||
|
||||
/*=======================================================
|
||||
|
|
@ -385,18 +400,18 @@ a:focus {
|
|||
}
|
||||
|
||||
.card {
|
||||
border-radius: 0px!important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border:none!important;
|
||||
border: none !important;
|
||||
width: 100%;
|
||||
margin:15px 0;
|
||||
margin: 15px 0;
|
||||
box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
|
||||
border-radius: 6px;
|
||||
color: rgba(0,0,0, 0.87);
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -408,8 +423,8 @@ a:focus {
|
|||
.card .card-header {
|
||||
padding: 15px 20px 0;
|
||||
z-index: 3;
|
||||
background-color:#fff!important;
|
||||
border-bottom:none;
|
||||
background-color: #fff !important;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.card .card-footer .stats .material-icons {
|
||||
|
|
@ -432,21 +447,24 @@ a:focus {
|
|||
.icon.icon-rose {
|
||||
color: #e91e63;
|
||||
}
|
||||
|
||||
.icon.icon-success {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.icon.icon-info {
|
||||
color: #00bcd4;
|
||||
}
|
||||
|
||||
.card .card-footer {
|
||||
margin: 0 7px 0px;
|
||||
padding-top: 10px;
|
||||
background-color:#fff;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: #03A9F4!important;
|
||||
color: #03A9F4 !important;
|
||||
}
|
||||
|
||||
.card-stats .card-content {
|
||||
|
|
@ -462,6 +480,7 @@ a:focus {
|
|||
.card .card-content .category {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card .category:not([class*="text-"]) {
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
|
|
@ -487,17 +506,17 @@ a:focus {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.card .card-header-text h4{
|
||||
.card .card-header-text h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 3px;
|
||||
font-size:19px;
|
||||
font-size: 19px;
|
||||
font-weight: 400;
|
||||
color: #222222;
|
||||
color: #222222;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
.table > thead > tr > th {
|
||||
.table>thead>tr>th {
|
||||
border-bottom-width: 1px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
|
|
@ -531,12 +550,15 @@ a:focus {
|
|||
height: 12px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.streamline .sl-primary:before, .streamline .sl-primary:last-child:after {
|
||||
|
||||
.streamline .sl-primary:before,
|
||||
.streamline .sl-primary:last-child:after {
|
||||
background-color: #188ae2;
|
||||
}
|
||||
|
||||
|
||||
.streamline .sl-danger:before, .streamline .sl-danger:last-child:after {
|
||||
.streamline .sl-danger:before,
|
||||
.streamline .sl-danger:last-child:after {
|
||||
background-color: #ff5b5b;
|
||||
}
|
||||
|
||||
|
|
@ -544,7 +566,8 @@ a:focus {
|
|||
border-left-color: #10c469;
|
||||
}
|
||||
|
||||
.streamline .sl-success:before, .streamline .sl-success:last-child:after {
|
||||
.streamline .sl-success:before,
|
||||
.streamline .sl-success:last-child:after {
|
||||
background-color: #10c469;
|
||||
}
|
||||
|
||||
|
|
@ -552,7 +575,8 @@ a:focus {
|
|||
border-left-color: #f9c851;
|
||||
}
|
||||
|
||||
.streamline .sl-warning:before, .streamline .sl-warning:last-child:after {
|
||||
.streamline .sl-warning:before,
|
||||
.streamline .sl-warning:last-child:after {
|
||||
background-color: #f9c851;
|
||||
}
|
||||
|
||||
|
|
@ -561,6 +585,7 @@ a:focus {
|
|||
.streamline .sl-danger {
|
||||
border-left-color: #ff5b5b;
|
||||
}
|
||||
|
||||
.streamline .sl-item .sl-content {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
|
@ -568,12 +593,12 @@ a:focus {
|
|||
.streamline .sl-item .text-muted {
|
||||
color: inherit;
|
||||
opacity: .6;
|
||||
font-size:12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.streamline .sl-item p {
|
||||
font-size:14px;
|
||||
color:#333;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -593,8 +618,8 @@ a:focus {
|
|||
|
||||
footer {
|
||||
padding: 10px 0;
|
||||
position:relative;
|
||||
width:100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer ul li {
|
||||
|
|
@ -616,7 +641,7 @@ footer ul li a {
|
|||
|
||||
footer .copyright {
|
||||
padding: 15px;
|
||||
font-size:14px;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -627,122 +652,15 @@ footer .copyright {
|
|||
|
||||
|
||||
|
||||
#sidebar.show-nav,.body-overlay.show-nav{
|
||||
transform:translatex(0%);
|
||||
opacity:1;
|
||||
display:block;
|
||||
visibility:visible;
|
||||
z-index:15;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
MEDIAQUERIES
|
||||
----------------------------------------------------- */
|
||||
|
||||
@media only screen and (min-width:992px){
|
||||
#sidebar.active {
|
||||
width:80px;
|
||||
height:100%!important;
|
||||
position:absolute!important;
|
||||
overflow:visible!important;
|
||||
top:0!important;
|
||||
z-index:666;
|
||||
float:left!important;
|
||||
bottom: 0!important;
|
||||
}
|
||||
|
||||
|
||||
#sidebar.active .sidebar-header h3 span {
|
||||
display:none;
|
||||
transition:all 0.5s ease;
|
||||
}
|
||||
|
||||
#sidebar.active ul li a span{
|
||||
display:none;
|
||||
transition:all 0.5s ease;
|
||||
}
|
||||
|
||||
#sidebar.active .dropdown-toggle::after {
|
||||
display:none;
|
||||
transition:all 0.5s ease;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: calc(100% - 260px);
|
||||
position: relative;
|
||||
float: right;
|
||||
transition: all 0.3s;
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
|
||||
#content.active {
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
|
||||
#sidebar.active .menu {
|
||||
position: absolute;
|
||||
left: 81px;
|
||||
background-color: white;
|
||||
width: 180px;
|
||||
height: auto;
|
||||
margin: 5px 0;
|
||||
top: 0;
|
||||
border: 1px solid #dcd9d9;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width:992px){
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
|
||||
transform: translate3d(0, -20px, 0);
|
||||
visibility: hidden;
|
||||
transition: all 150ms linear;
|
||||
#sidebar.show-nav,
|
||||
.body-overlay.show-nav {
|
||||
transform: translatex(0%);
|
||||
opacity: 1;
|
||||
display: block;
|
||||
min-width:15rem;
|
||||
right: 0;
|
||||
left: auto;
|
||||
opacity: 0;
|
||||
visibility: visible;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*===============small-screen overlay sidebar design media queries==============*/
|
||||
|
||||
@media only screen and (max-width:992px){
|
||||
#sidebar {
|
||||
position:fixed;
|
||||
top: 0;
|
||||
bottom:0;
|
||||
z-index: 10;
|
||||
width: 260px;
|
||||
transform:translatex(-100%);
|
||||
transition: all 150ms linear;
|
||||
box-shadow:none!important;
|
||||
}
|
||||
|
||||
.body-overlay{
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:none;
|
||||
visibility:hidden;
|
||||
opacity:0;
|
||||
z-index:3;
|
||||
transition: all 150ms linear;
|
||||
background-color:rgba(0,0,0,0.5);
|
||||
}
|
||||
}
|
||||
/*===============small-screen overlay sidebar design media queries==============*/
|
||||
|
||||
|
||||
|
||||
|
|
@ -751,5 +669,111 @@ footer .copyright {
|
|||
MEDIAQUERIES
|
||||
----------------------------------------------------- */
|
||||
|
||||
@media only screen and (min-width:992px) {
|
||||
#sidebar.active {
|
||||
width: 80px;
|
||||
height: 100% !important;
|
||||
position: absolute !important;
|
||||
overflow: visible !important;
|
||||
top: 0 !important;
|
||||
z-index: 666;
|
||||
float: left !important;
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
#sidebar.active .sidebar-header h3 span {
|
||||
display: none;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#sidebar.active ul li a span {
|
||||
display: none;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#sidebar.active .dropdown-toggle::after {
|
||||
display: none;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: calc(100% - 260px);
|
||||
position: relative;
|
||||
float: right;
|
||||
transition: all 0.3s;
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
|
||||
#content.active {
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
|
||||
#sidebar.active .menu {
|
||||
position: absolute;
|
||||
left: 81px;
|
||||
background-color: white;
|
||||
width: 180px;
|
||||
height: auto;
|
||||
margin: 5px 0;
|
||||
top: 0;
|
||||
border: 1px solid #dcd9d9;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width:992px) {
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
|
||||
transform: translate3d(0, -20px, 0);
|
||||
visibility: hidden;
|
||||
transition: all 150ms linear;
|
||||
display: block;
|
||||
min-width: 15rem;
|
||||
right: 0;
|
||||
left: auto;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*===============small-screen overlay sidebar design media queries==============*/
|
||||
|
||||
@media only screen and (max-width:992px) {
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
width: 260px;
|
||||
transform: translatex(-100%);
|
||||
transition: all 150ms linear;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.body-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 3;
|
||||
transition: all 150ms linear;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
/*===============small-screen overlay sidebar design media queries==============*/
|
||||
|
||||
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
MEDIAQUERIES
|
||||
----------------------------------------------------- */
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('page_title', 'Add Station')
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="card-header border-0 bg-transparent py-2">
|
||||
<h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Add New Station</h5>
|
||||
</div>
|
||||
<div class="card-body py-2">
|
||||
<form action="#" method="POST" id="addStationForm">
|
||||
@csrf
|
||||
<div class="mb-2">
|
||||
<label for="stationCode" class="form-label mb-1">Station Code</label>
|
||||
<input type="text" class="form-control form-control-sm" id="stationCode" name="stationCode" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="stationName" class="form-label mb-1">Station Name</label>
|
||||
<input type="text" class="form-control form-control-sm" id="stationName" name="stationName" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="stationLocation" class="form-label mb-1">Station Location</label>
|
||||
<input type="text" class="form-control form-control-sm" id="stationLocation" name="stationLocation" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="mapUrl" class="form-label mb-1">Map URL</label>
|
||||
<input type="url" class="form-control form-control-sm" id="mapUrl" name="mapUrl" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="latitude" class="form-label mb-1">Latitude</label>
|
||||
<input type="text" class="form-control form-control-sm" id="latitude" name="latitude" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="longitude" class="form-label mb-1">Longitude</label>
|
||||
<input type="text" class="form-control form-control-sm" id="longitude" name="longitude" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="contactNumber" class="form-label mb-1">Contact Number</label>
|
||||
<input type="text" class="form-control form-control-sm" id="contactNumber" name="contactNumber" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="branch" class="form-label mb-1">Branch</label>
|
||||
<input type="text" class="form-control form-control-sm" id="branch" name="branch" required>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-3">
|
||||
<a href="{{ url('station-management') }}" class="btn btn-outline-secondary btn-sm me-2" style="margin-right:5px">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Add Station</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.form-control,
|
||||
.form-select {
|
||||
font-size: 0.85rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #E74610;
|
||||
border-color: #E74610;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #d63f0e;
|
||||
border-color: #d63f0e;
|
||||
}
|
||||
.btn-outline-secondary {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
.form-control-sm,
|
||||
.form-select-sm {
|
||||
height: calc(1.5em + 0.5rem + 2px);
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
|
@ -1,14 +1,81 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('page_title', 'Station Locator')
|
||||
@section('page_title', 'Station Management')
|
||||
|
||||
@section('content')
|
||||
<div class="card" style="min-height: 500px;">
|
||||
<div class="card-header">
|
||||
<i class="fa-solid fa-location-dot" style="color:gray;"> Stations</i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>This is the Stations page content.</p>
|
||||
</div>
|
||||
</div>
|
||||
@php
|
||||
$stations = [
|
||||
[
|
||||
'id' => 1,
|
||||
'station_code' => 'ST001',
|
||||
'station_name' => 'North Station',
|
||||
'branch_name' => 'Quezon City Branch',
|
||||
'date_created' => '2023-05-01',
|
||||
'created_by' => 'Maryse Howe',
|
||||
'modified_by' => 'Joseph Sazon',
|
||||
'date_modified' => '2023-06-15'
|
||||
],
|
||||
[
|
||||
'id' => 2,
|
||||
'station_code' => 'ST002',
|
||||
'station_name' => 'East Hub',
|
||||
'branch_name' => 'Pasig Branch',
|
||||
'date_created' => '2023-05-10',
|
||||
'created_by' => 'Graxia Montino',
|
||||
'modified_by' => 'Cine Rosimo',
|
||||
'date_modified' => '2023-07-01'
|
||||
],
|
||||
[
|
||||
'id' => 3,
|
||||
'station_code' => 'ST003',
|
||||
'station_name' => 'West Terminal',
|
||||
'branch_name' => 'Makati Branch',
|
||||
'date_created' => '2023-06-20',
|
||||
'created_by' => 'Cine Rosimo',
|
||||
'modified_by' => 'Graxia Montino',
|
||||
'date_modified' => '2023-08-05'
|
||||
],
|
||||
[
|
||||
'id' => 4,
|
||||
'station_code' => 'ST004',
|
||||
'station_name' => 'Central Depot',
|
||||
'branch_name' => 'Manila Branch',
|
||||
'date_created' => '2023-07-05',
|
||||
'created_by' => 'Maryse Howe',
|
||||
'modified_by' => 'Maryse Howe',
|
||||
'date_modified' => '2023-09-10'
|
||||
],
|
||||
[
|
||||
'id' => 5,
|
||||
'station_code' => 'ST005',
|
||||
'station_name' => 'South Station',
|
||||
'branch_name' => 'Parañaque Branch',
|
||||
'date_created' => '2023-08-15',
|
||||
'created_by' => 'Joseph Sazon',
|
||||
'modified_by' => 'Graxia Montino',
|
||||
'date_modified' => '2023-10-01'
|
||||
]
|
||||
];
|
||||
@endphp
|
||||
|
||||
@include('components.table-component', [
|
||||
'pageTitle' => 'Station Management',
|
||||
'data' => $stations,
|
||||
'columns' => [
|
||||
['name' => 'Station Code', 'key' => 'station_code', 'sortable' => true],
|
||||
['name' => 'Station Name', 'key' => 'station_name', 'sortable' => true],
|
||||
['name' => 'Branch Name', 'key' => 'branch_name', 'sortable' => true],
|
||||
['name' => 'Date Created', 'key' => 'date_created', 'sortable' => true],
|
||||
['name' => 'Created By', 'key' => 'created_by', 'sortable' => true],
|
||||
['name' => 'Modified By', 'key' => 'modified_by', 'sortable' => true],
|
||||
['name' => 'Date Modified', 'key' => 'date_modified', 'sortable' => true]
|
||||
],
|
||||
'actions' => ['edit', 'view', 'delete'],
|
||||
'showAddButton' => true,
|
||||
'addButtonUrl' => '/add-station',
|
||||
'showCheckboxes' => false,
|
||||
'showBatchDelete' => false,
|
||||
'showEditModal' => true,
|
||||
'showViewModal' => true
|
||||
])
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -127,3 +127,7 @@ Route::get('/add-branches', function () {
|
|||
Route::get('/add-fuels', function () {
|
||||
return view('pages.add-fuels');
|
||||
})->name('add-fuels');
|
||||
|
||||
Route::get('/add-station', function () {
|
||||
return view('pages.add-station');
|
||||
})->name('add-station');
|
||||
Loading…
Reference in New Issue