Commit 1cbb9d0b authored by Gautam Chitnis's avatar Gautam Chitnis

Refactor (SASS): Complete division of SASS code

This commit divides and places the sass code in its appropriate locations.
Remaining minor improvements/optimizations will be done later.
Readme has been modified to reflect recent changes.

Gautam C.
parent 7498c37d
......@@ -61,7 +61,5 @@ TODOs for Web Interface:
1. Move all attribute styling to sass from HTML.
2. Write commands for compilation of sass and js files.
3. Refactor smaller components into Vue Components.
4. Place code from script.js into appropriate file.
5. Test and correct issues regarding VLM commands.
6. Review how to make sure precompiled code from \vendors goes to \dist while building.
3. Test and correct issues regarding VLM commands.
4. Review how to make sure precompiled code from \vendors goes to \dist while building.
......@@ -5,9 +5,8 @@
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>VLC media player - Web Interface</title>
<link rel="stylesheet" href="dist/css/plyr-custom.css">
<link rel="stylesheet" href="src/vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/style.css">
<link rel="stylesheet" href="dist/css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='src/vendors/vue/vue.js'></script>
<script src="src/vendors/plyr/plyr.js"></script>
......@@ -25,7 +24,7 @@
<head>
<link rel="stylesheet" href="dist/css/plyr-custom.css">
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/cssstyle.css">
<link rel="stylesheet" href="dist/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='dist/js/vue.js'></script>
<script src="dist/js/plyr.js"></script>
......
/* The side navigation menu */
.sideNav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 5; /* Stay on top */
top: 0;
left: 0;
background-color: orange;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sideNav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #111;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sideNav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sideNav .closebtn {
position: absolute;
top: 0;
font-size: 36px;
}
.sideNav .closespn {
font-size: 36px;
margin-left: 60%;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sideNav {padding-top: 15px;}
.sideNav a {font-size: 18px;}
}
.glyphicon.glyphicon-menu-hamburger {
font-size: 2em;
}
\ No newline at end of file
#videoPlayer {
padding-right: 12%;
padding-left: 2%;
left:0;
top:0;
margin:0;
width:90%;
}
@media screen and (min-device-width : 320px) and (max-device-width : 480px) {
#videoPlayer {
padding-right: 12%;
padding-left: 2%;
top: initial;
left: initial;
margin:0 auto;
width:100%;
}
}
\ No newline at end of file
......@@ -3,8 +3,8 @@
// https://github.com/selz/plyr
// ==========================================================================
@import "variables";
@import "mixins";
@import "plyr.lib.vars.scss";
@import "../utils/mixins.scss";
// Animation
// ---------------------------------------
......
// ==========================================================================
// Plyr variables
// https://github.com/selz/plyr
// https://robots.thoughtbot.com/sass-default
// ==========================================================================
// Settings
......
/* The side navigation menu */
.sideNav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 5; /* Stay on top */
top: 0;
left: 0;
background-color: orange;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sideNav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #111;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sideNav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sideNav .closebtn {
position: absolute;
top: 0;
font-size: 36px;
}
.sideNav .closespn {
font-size: 36px;
margin-left: 60%;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sideNav {padding-top: 15px;}
.sideNav a {font-size: 18px;}
}
body {
background-color: black;
}
.playlistNav {
right: 0;
width: 20%;
......@@ -62,32 +11,6 @@ body {
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
#app {
height: 80%;
}
#videoPlayer {
padding-right: 12%;
padding-left: 2%;
left:0;
top:0;
margin:0;
width:90%;
}
#cust-progress {
display: block;
width:100%;
}
#cust-controls {
display: block;
}
.glyphicon.glyphicon-menu-hamburger {
font-size: 2em;
}
.playlistIcons {
font-size: 2em;
padding-left: 4%;
......@@ -108,11 +31,6 @@ body {
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
#playlist {
width:21.5%;
height: 100%;
}
.btn-circle {
width: 30px;
height: 30px;
......@@ -146,6 +64,12 @@ body {
margin-bottom: 0.2em;
background-color: white;
}
#playlist {
width:21.5%;
height: 100%;
}
@media screen and (min-device-width : 320px) and (max-device-width : 480px) {
.playlistNav {
width: 0%;
......@@ -157,19 +81,8 @@ body {
top: 50%;
}
body {
height: auto;
}
#playlist {
width: 95%;
height: 90%;
}
#videoPlayer {
padding-right: 12%;
padding-left: 2%;
top: initial;
left: initial;
margin:0 auto;
width:100%;
}
}
\ No newline at end of file
// components.scss
@import '../components/player/plyr.lib.custom.scss';
@import '../components/player/player.element.scss';
@import '../components/controls/sidenav.scss';
@import '../components/playlist/playlist.scss';
// main.scss
// custom global styles
body {
background-color: black;
}
@media screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
height: auto;
}
}
#cust-progress {
display: block;
width:100%;
}
#cust-controls {
display: block;
}
// component styles
@import 'components.scss';
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment