Structuring card css

src/core/static/css/main.css

@@ -18,6 +18,46 @@
     z-index: -999;
 }
 
+#master-container {
+    height: 85vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+#files {
+    margin-bottom: 6em;
+}
+
+
+
+/* CLASSES */
+.scroller {
+	scrollbar-color: #00000084 #ffffff64;
+	scrollbar-width: thin;
+}
+
+.volume-control-positioner {
+    position: absolute;
+    bottom: 2em;
+    right: 50%;
+    left: 50%;
+}
+
+
+
+
+.dir-style, .video-style, .image-style, .file-style {
+	height: auto;
+	width: 24vw;
+	position: relative;
+	max-width: 20em;
+}
+
+
+
+
+
+
 /* Other message text colors */
 .errorTxt   { color: rgb(170, 18, 18); }
 .warningTxt { color: rgb(255, 168, 0); }

src/core/static/css/overrides.css

@@ -0,0 +1,40 @@
+ul, li {
+    list-style: none;
+}
+
+/* Vertical slider */
+input[type=range][orient=vertical] {
+    writing-mode: bt-lr; /* IE */
+    -webkit-appearance: slider-vertical; /* WebKit */
+    width: 8px;
+    height: 175px;
+    padding: 0 5px;
+}
+
+
+
+#video-container::-webkit-media-controls {
+  display: none !important;
+}
+
+#video-container::-webkit-media-controls-enclosure {
+  display: none !important;
+}
+
+
+
+
+.modal-content {
+    background-color: #32383e74;
+    border-color: #f8940674;
+}
+
+.sticky-top,
+.card {
+    background-color: rgba(50, 56, 62, 0.84);
+}
+
+.label-as-badge {
+    border-radius: 1em;
+    cursor: pointer;
+}

src/core/templates/layout.html

@@ -67,7 +67,7 @@
     {% endblock %}
 
 
-    <div class="container bg-dark" style="height: 80vh;">
+    <div id="master-container" class="container scroller">
         <!-- System flashed messages! -->
         {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}

src/core/templates/pages/index.html

@@ -14,13 +14,13 @@
 {% endblock body_header_additional %}
 
 {% block body_content_additional %}
-<div class="row" style="margin-bottom: 6em;">
+<div id="files" class="row">
         {% for file in files %}
-        <div class="col-sm-3">
+        <div class="col-sm-12 col-md-6 col-lg-4">
             <div class="card">
                 <div class="card-header">{{file[0]}}</div>
                 <div class="card-body">
-                    <img class="" src="" alt="" />
+                    <img class="image-style" src="/api/files/{{file[1]}}" alt="{{file[0]}}" />
                 </div>
                 <div class="card-footer">
                     <input app="{{file[1]}}" class="btn btn-secondary btn-sm" type="button" value="Launch"/>
@@ -41,4 +41,5 @@
     <script src="{{ url_for('static', filename='js/post-ajax.js')}}"></script>
     <script src="{{ url_for('static', filename='js/ajax.js')}}"></script>
     <script src="{{ url_for('static', filename='js/events.js')}}"></script>
+    <script src="{{ url_for('static', filename='js/react-ui-logic.js')}}"></script>
 {% endblock body_scripts_additional %}

src/core/utils/shellfm/windows/Filters.py

@@ -5,3 +5,5 @@ class Filters:
     ftext   = ('.txt', '.text', '.sh', '.cfg', '.conf')
     fmusic  = ('.psf', '.mp3', '.ogg', '.flac', '.m4a')
     fpdf    = ('.pdf')
+
+    subpath = "/LazyShare/Synced Backup/222_Photos/Backgrounds/HD-Wallpapers"

src/core/utils/shellfm/windows/Path.py

@@ -26,7 +26,7 @@ class Path:
         self.load_directory()
 
     def set_to_home(self):
-        home = os.path.expanduser("~")
+        home = os.path.expanduser("~") + self.subpath
         path = list( filter(None, home.replace("\\", "/").split('/')) )
         self.path = path
         self.load_directory()