front end for Unioil CMS done.
This commit is contained in:
parent
21adb9364f
commit
00d3c3f826
|
|
@ -205,7 +205,7 @@ code,
|
||||||
kbd,
|
kbd,
|
||||||
pre,
|
pre,
|
||||||
samp {
|
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
|
font-size: 1em
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,29 @@
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css?family=Nova+Slim&display=swap');
|
@import url('https://fonts.googleapis.com/css?family=Nova+Slim&display=swap');
|
||||||
|
|
||||||
body, html {
|
body,
|
||||||
|
html {
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||||
color: #555e58;
|
color: #555e58;
|
||||||
text-transform:capitalize;
|
text-transform: capitalize;
|
||||||
text-rendering: optimizeLegibility !important;
|
text-rendering: optimizeLegibility !important;
|
||||||
-webkit-font-smoothing: antialiased !important;
|
-webkit-font-smoothing: antialiased !important;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
margin:0px;
|
margin: 0px;
|
||||||
padding: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;
|
font-weight: 400;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
@ -28,24 +37,25 @@ p {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
a{
|
a {
|
||||||
color: #333;
|
color: #333;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:focus{
|
button:focus {
|
||||||
box-shadow:none;
|
box-shadow: none;
|
||||||
outline:none;
|
outline: none;
|
||||||
border:none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
button{
|
button {
|
||||||
cursor:pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul, ol {
|
ul,
|
||||||
|
ol {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin:0px;
|
margin: 0px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -69,7 +79,8 @@ a:focus {
|
||||||
font-family: 'Material Icons';
|
font-family: 'Material Icons';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
|
src: url(https://example.com/MaterialIcons-Regular.eot);
|
||||||
|
/* For IE6-8 */
|
||||||
src: local('Material Icons'),
|
src: local('Material Icons'),
|
||||||
local('MaterialIcons-Regular'),
|
local('MaterialIcons-Regular'),
|
||||||
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
|
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
|
||||||
|
|
@ -82,7 +93,8 @@ a:focus {
|
||||||
font-family: 'Material Icons';
|
font-family: 'Material Icons';
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 24px; /* Preferred icon size */
|
font-size: 24px;
|
||||||
|
/* Preferred icon size */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
|
|
@ -111,8 +123,8 @@ a:focus {
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width:100%;
|
width: 100%;
|
||||||
overflow:auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -126,71 +138,73 @@ a:focus {
|
||||||
|
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
position:fixed;
|
position: fixed;
|
||||||
height:100vh!important;
|
height: 100vh !important;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index:11;
|
z-index: 11;
|
||||||
width: 260px;
|
width: 260px;
|
||||||
overflow:auto;
|
overflow: auto;
|
||||||
transition:all 0.3s ;
|
transition: all 0.3s;
|
||||||
background: #FFFFFF;
|
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%);
|
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{
|
#sidebar::-webkit-scrollbar {
|
||||||
width:5px;
|
width: 5px;
|
||||||
border-radius:10px;
|
border-radius: 10px;
|
||||||
background-color:#eee;
|
background-color: #eee;
|
||||||
display:none;
|
display: none;
|
||||||
}
|
}
|
||||||
#sidebar::-webkit-scrollbar-thumbs{
|
|
||||||
width:5px;
|
#sidebar::-webkit-scrollbar-thumbs {
|
||||||
border-radius:10px;
|
width: 5px;
|
||||||
background-color:#333;
|
border-radius: 10px;
|
||||||
display:none;
|
background-color: #333;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#sidebar:hover::-webkit-scrollbar{
|
#sidebar:hover::-webkit-scrollbar {
|
||||||
display:block;
|
display: block;
|
||||||
}
|
}
|
||||||
#sidebar:hover::-webkit-scrollbar-thumbs{
|
|
||||||
display:block;
|
#sidebar:hover::-webkit-scrollbar-thumbs {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar .sidebar-header {
|
#sidebar .sidebar-header {
|
||||||
padding:20px;
|
padding: 20px;
|
||||||
background-color:#ffffff;
|
background-color: #ffffff;
|
||||||
border-bottom:1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-header h3{
|
.sidebar-header h3 {
|
||||||
color:#333;
|
color: #333;
|
||||||
font-size:17px;
|
font-size: 17px;
|
||||||
margin:0px;
|
margin: 0px;
|
||||||
text-transform:uppercase;
|
text-transform: uppercase;
|
||||||
transition:all 0.5s ease;
|
transition: all 0.5s ease;
|
||||||
font-weight:600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-header h3 img{
|
.sidebar-header h3 img {
|
||||||
width:120px;
|
width: 120px;
|
||||||
margin-right:10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul li{
|
#sidebar ul li {
|
||||||
padding:2px 7px;
|
padding: 2px 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul li.active>a{
|
#sidebar ul li.active>a {
|
||||||
color: #333;
|
color: #333;
|
||||||
background-color: rgba(200, 200, 200, 0.2);
|
background-color: rgba(200, 200, 200, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul li a:hover{
|
#sidebar ul li a:hover {
|
||||||
color: #333;
|
color: #333;
|
||||||
background-color: rgba(200, 200, 200, 0.2);
|
background-color: rgba(200, 200, 200, 0.2);
|
||||||
}
|
}
|
||||||
|
|
@ -201,8 +215,8 @@ a:focus {
|
||||||
top: 23px;
|
top: 23px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul li.drodown{
|
#sidebar ul li.drodown {
|
||||||
position:sticky;
|
position: sticky;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -213,16 +227,16 @@ a:focus {
|
||||||
#sidebar ul li a {
|
#sidebar ul li a {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
border-radius:5px;
|
border-radius: 5px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
position:relative;
|
position: relative;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul li a span{
|
#sidebar ul li a span {
|
||||||
text-transform:capitalize;
|
text-transform: capitalize;
|
||||||
display:inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul li a i {
|
#sidebar ul li a i {
|
||||||
|
|
@ -256,22 +270,22 @@ a:focus {
|
||||||
background-color: #EEEEEE;
|
background-color: #EEEEEE;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-navbar{
|
.top-navbar {
|
||||||
width:100%;
|
width: 100%;
|
||||||
z-index:9;
|
z-index: 9;
|
||||||
position:relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.main-content{
|
.main-content {
|
||||||
padding:10px 20px 0px 20px;
|
padding: 10px 20px 0px 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.navbar{
|
.navbar {
|
||||||
background-color: #2196F3;
|
background-color: #2196F3;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
@ -280,22 +294,23 @@ a:focus {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar button{
|
.navbar button {
|
||||||
background-color:transparent;
|
background-color: transparent;
|
||||||
border:none;
|
border: none;
|
||||||
}
|
|
||||||
.navbar button span{
|
|
||||||
color:#fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebarCollapse{
|
.navbar button span {
|
||||||
border-radius:50%;
|
color: #fff;
|
||||||
width:45px;
|
}
|
||||||
height:45px;
|
|
||||||
text-align:center;
|
#sidebarCollapse {
|
||||||
line-height:45px;
|
border-radius: 50%;
|
||||||
margin-right:20px;
|
width: 45px;
|
||||||
border:none;
|
height: 45px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 45px;
|
||||||
|
margin-right: 20px;
|
||||||
|
border: none;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
background-color: rgba(0, 0, 0, 0.09);
|
background-color: rgba(0, 0, 0, 0.09);
|
||||||
}
|
}
|
||||||
|
|
@ -307,13 +322,13 @@ a:focus {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.navbar-nav > li.active{
|
.navbar-nav>li.active {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
border-radius:4px;
|
border-radius: 4px;
|
||||||
background-color: rgba(0, 0, 0, 0.08);
|
background-color: rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-nav > li > a {
|
.navbar-nav>li>a {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -336,14 +351,14 @@ a:focus {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.navbar-nav > li.show .dropdown-menu {
|
.navbar-nav>li.show .dropdown-menu {
|
||||||
transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
||||||
opacity:1;
|
opacity: 1;
|
||||||
visibility:visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.dropdown-menu li > a {
|
.dropdown-menu li>a {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
|
|
@ -352,7 +367,7 @@ a:focus {
|
||||||
transition: all 150ms linear;
|
transition: all 150ms linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-nav > .active > a:focus {
|
.navbar-nav>.active>a:focus {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
background-color: rgba(0, 0, 0, 0.08);
|
background-color: rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
@ -361,7 +376,7 @@ a:focus {
|
||||||
.navbar-nav li a {
|
.navbar-nav li a {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
padding: 10px 15px!important;
|
padding: 10px 15px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*=======================================================
|
/*=======================================================
|
||||||
|
|
@ -385,18 +400,18 @@ a:focus {
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
border-radius: 0px!important;
|
border-radius: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
border:none!important;
|
border: none !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin:15px 0;
|
margin: 15px 0;
|
||||||
box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
|
box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: rgba(0,0,0, 0.87);
|
color: rgba(0, 0, 0, 0.87);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -408,8 +423,8 @@ a:focus {
|
||||||
.card .card-header {
|
.card .card-header {
|
||||||
padding: 15px 20px 0;
|
padding: 15px 20px 0;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
background-color:#fff!important;
|
background-color: #fff !important;
|
||||||
border-bottom:none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card .card-footer .stats .material-icons {
|
.card .card-footer .stats .material-icons {
|
||||||
|
|
@ -432,21 +447,24 @@ a:focus {
|
||||||
.icon.icon-rose {
|
.icon.icon-rose {
|
||||||
color: #e91e63;
|
color: #e91e63;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon.icon-success {
|
.icon.icon-success {
|
||||||
color: #4caf50;
|
color: #4caf50;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon.icon-info {
|
.icon.icon-info {
|
||||||
color: #00bcd4;
|
color: #00bcd4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card .card-footer {
|
.card .card-footer {
|
||||||
margin: 0 7px 0px;
|
margin: 0 7px 0px;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
background-color:#fff;
|
background-color: #fff;
|
||||||
border-top: 1px solid #eeeeee;
|
border-top: 1px solid #eeeeee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-info {
|
.text-info {
|
||||||
color: #03A9F4!important;
|
color: #03A9F4 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-stats .card-content {
|
.card-stats .card-content {
|
||||||
|
|
@ -462,6 +480,7 @@ a:focus {
|
||||||
.card .card-content .category {
|
.card .card-content .category {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card .category:not([class*="text-"]) {
|
.card .category:not([class*="text-"]) {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -487,17 +506,17 @@ a:focus {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card .card-header-text h4{
|
.card .card-header-text h4 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
font-size:19px;
|
font-size: 19px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table > thead > tr > th {
|
.table>thead>tr>th {
|
||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
@ -531,12 +550,15 @@ a:focus {
|
||||||
height: 12px;
|
height: 12px;
|
||||||
border-radius: 100%;
|
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;
|
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;
|
background-color: #ff5b5b;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -544,7 +566,8 @@ a:focus {
|
||||||
border-left-color: #10c469;
|
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;
|
background-color: #10c469;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -552,7 +575,8 @@ a:focus {
|
||||||
border-left-color: #f9c851;
|
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;
|
background-color: #f9c851;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -561,6 +585,7 @@ a:focus {
|
||||||
.streamline .sl-danger {
|
.streamline .sl-danger {
|
||||||
border-left-color: #ff5b5b;
|
border-left-color: #ff5b5b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.streamline .sl-item .sl-content {
|
.streamline .sl-item .sl-content {
|
||||||
margin-left: 24px;
|
margin-left: 24px;
|
||||||
}
|
}
|
||||||
|
|
@ -568,12 +593,12 @@ a:focus {
|
||||||
.streamline .sl-item .text-muted {
|
.streamline .sl-item .text-muted {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
opacity: .6;
|
opacity: .6;
|
||||||
font-size:12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.streamline .sl-item p {
|
.streamline .sl-item p {
|
||||||
font-size:14px;
|
font-size: 14px;
|
||||||
color:#333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -593,8 +618,8 @@ a:focus {
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
position:relative;
|
position: relative;
|
||||||
width:100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer ul li {
|
footer ul li {
|
||||||
|
|
@ -616,7 +641,7 @@ footer ul li a {
|
||||||
|
|
||||||
footer .copyright {
|
footer .copyright {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
font-size:14px;
|
font-size: 14px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -627,12 +652,13 @@ footer .copyright {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#sidebar.show-nav,.body-overlay.show-nav{
|
#sidebar.show-nav,
|
||||||
transform:translatex(0%);
|
.body-overlay.show-nav {
|
||||||
opacity:1;
|
transform: translatex(0%);
|
||||||
display:block;
|
opacity: 1;
|
||||||
visibility:visible;
|
display: block;
|
||||||
z-index:15;
|
visibility: visible;
|
||||||
|
z-index: 15;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -643,47 +669,47 @@ footer .copyright {
|
||||||
MEDIAQUERIES
|
MEDIAQUERIES
|
||||||
----------------------------------------------------- */
|
----------------------------------------------------- */
|
||||||
|
|
||||||
@media only screen and (min-width:992px){
|
@media only screen and (min-width:992px) {
|
||||||
#sidebar.active {
|
#sidebar.active {
|
||||||
width:80px;
|
width: 80px;
|
||||||
height:100%!important;
|
height: 100% !important;
|
||||||
position:absolute!important;
|
position: absolute !important;
|
||||||
overflow:visible!important;
|
overflow: visible !important;
|
||||||
top:0!important;
|
top: 0 !important;
|
||||||
z-index:666;
|
z-index: 666;
|
||||||
float:left!important;
|
float: left !important;
|
||||||
bottom: 0!important;
|
bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#sidebar.active .sidebar-header h3 span {
|
#sidebar.active .sidebar-header h3 span {
|
||||||
display:none;
|
display: none;
|
||||||
transition:all 0.5s ease;
|
transition: all 0.5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar.active ul li a span{
|
#sidebar.active ul li a span {
|
||||||
display:none;
|
display: none;
|
||||||
transition:all 0.5s ease;
|
transition: all 0.5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar.active .dropdown-toggle::after {
|
#sidebar.active .dropdown-toggle::after {
|
||||||
display:none;
|
display: none;
|
||||||
transition:all 0.5s ease;
|
transition: all 0.5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
width: calc(100% - 260px);
|
width: calc(100% - 260px);
|
||||||
position: relative;
|
position: relative;
|
||||||
float: right;
|
float: right;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
background-color: #EEEEEE;
|
background-color: #EEEEEE;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content.active {
|
#content.active {
|
||||||
width: calc(100% - 80px);
|
width: calc(100% - 80px);
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar.active .menu {
|
#sidebar.active .menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 81px;
|
left: 81px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
@ -693,55 +719,56 @@ footer .copyright {
|
||||||
top: 0;
|
top: 0;
|
||||||
border: 1px solid #dcd9d9;
|
border: 1px solid #dcd9d9;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media only screen and (min-width:992px){
|
@media only screen and (min-width:992px) {
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
border: 0;
|
border: 0;
|
||||||
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
|
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
|
||||||
transform: translate3d(0, -20px, 0);
|
transform: translate3d(0, -20px, 0);
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transition: all 150ms linear;
|
transition: all 150ms linear;
|
||||||
display: block;
|
display: block;
|
||||||
min-width:15rem;
|
min-width: 15rem;
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*===============small-screen overlay sidebar design media queries==============*/
|
/*===============small-screen overlay sidebar design media queries==============*/
|
||||||
|
|
||||||
@media only screen and (max-width:992px){
|
@media only screen and (max-width:992px) {
|
||||||
#sidebar {
|
#sidebar {
|
||||||
position:fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom:0;
|
bottom: 0;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
width: 260px;
|
width: 260px;
|
||||||
transform:translatex(-100%);
|
transform: translatex(-100%);
|
||||||
transition: all 150ms linear;
|
transition: all 150ms linear;
|
||||||
box-shadow:none!important;
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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==============*/
|
/*===============small-screen overlay sidebar design media queries==============*/
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -750,6 +777,3 @@ footer .copyright {
|
||||||
/* ---------------------------------------------------
|
/* ---------------------------------------------------
|
||||||
MEDIAQUERIES
|
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')
|
@extends('layouts.app')
|
||||||
|
|
||||||
@section('page_title', 'Station Locator')
|
@section('page_title', 'Station Management')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card" style="min-height: 500px;">
|
@php
|
||||||
<div class="card-header">
|
$stations = [
|
||||||
<i class="fa-solid fa-location-dot" style="color:gray;"> Stations</i>
|
[
|
||||||
</div>
|
'id' => 1,
|
||||||
<div class="card-body">
|
'station_code' => 'ST001',
|
||||||
<p>This is the Stations page content.</p>
|
'station_name' => 'North Station',
|
||||||
</div>
|
'branch_name' => 'Quezon City Branch',
|
||||||
</div>
|
'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
|
@endsection
|
||||||
|
|
|
||||||
|
|
@ -127,3 +127,7 @@ Route::get('/add-branches', function () {
|
||||||
Route::get('/add-fuels', function () {
|
Route::get('/add-fuels', function () {
|
||||||
return view('pages.add-fuels');
|
return view('pages.add-fuels');
|
||||||
})->name('add-fuels');
|
})->name('add-fuels');
|
||||||
|
|
||||||
|
Route::get('/add-station', function () {
|
||||||
|
return view('pages.add-station');
|
||||||
|
})->name('add-station');
|
||||||
Loading…
Reference in New Issue