From 523b611ac5427d2dcbc617a9f48fb1d8d1dd7ccb Mon Sep 17 00:00:00 2001
From: Ro <ro@playvicio.us>
Date: Sun, 13 Mar 2022 14:22:22 -0700
Subject: [PATCH] fixed weird form post bug, updated page listing display for
 new assets

---
 brain/views/dash/book.twig                    | 81 +++++++------------
 brain/views/dash/forms/login.twig             |  2 +-
 brain/views/dash/page-edit.twig               |  2 +-
 brain/views/dash/partials/index.twig          |  8 +-
 brain/views/dash/partials/recent-options.twig |  3 -
 public/assets/css/dash.css                    | 39 +++++----
 src/styles/main/_posts.sass                   | 18 +++--
 7 files changed, 72 insertions(+), 81 deletions(-)

diff --git a/brain/views/dash/book.twig b/brain/views/dash/book.twig
index 5cb33c5..b13c883 100644
--- a/brain/views/dash/book.twig
+++ b/brain/views/dash/book.twig
@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block stylesheets %}
-    <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adfdfa">
+    <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfvgy">
     {% endblock %}
 
     {% block mainContent %}
@@ -45,58 +45,37 @@
                 </div>
                 <div id="posts-list">
                     {% for page in pages %}
-                        <a class="page-link" href="/dashboard/page/edit/{{ page.uuid }}">
-                            <div class="page-bg" style="background: url({{ page.feature }}) no-repeat center center / cover">
-                                <label>
-                                    {{ page.title }}
-                                </label>
-                               <div id="meta">
-                                    
-                                    <div id="options">
-                                        {% if page.menu == 'true' %}
-                                        {% set menu = "true" %}
-                                        {% else %}
-                                            {% set menu = "false" %}
-                                        {% endif %}
-                                        {% if page.published == 'true' %}
-                                            {% set published = "true" %}
-                                        {% else %}
-                                            {% set published = "false" %}
-                                        {% endif %}
-                                        {% if page.featured == 'true' %}
-                                            {% set featured = "true" %}
-                                        {% else %}
-                                            {% set featured = "false" %}
-                                        {% endif %}
-                                        <div id="option-left">
-                                            
-                                            <button data-active="{{ menu }}">
-                                                <svg>
-                                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>		
-                                                </svg>		
-                                            </button> 
-                                            <button data-active="{{ published }}">
-                                                <svg>
-                                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>		
-                                                </svg>		
-                                            </button> 
-                                            
-                                            <button data-active="{{ featured }}">
-                                                <svg>
-                                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-star"/>		
-                                                </svg>		
-                                            </button>
-                                        </div>
-                                        <div id="option-right">
-                                            <span>
-                                                {{ page.updated }}
-                                            </span>
-                                        </div>
-                                    </div>
+                        {% if page.media[0].type == 'mp4' %}
+                            <a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="page-link">
+                                <div class="page-video">
+                                    <video class="post-video" loop muted autoplay>
+                                    <source src="{{ page.media[0].file }}" type="video/mp4">
 
+                                    Sorry, your browser doesn't support embedded videos.
+                                    </video>
+                                    <label>
+                                       {{ page.title }}
+                                    </label>
+                                    <div id="meta">
+                                        {{ include("dash/partials/recent-options.twig") }}
+                                    </div>
                                 </div>
-                            </div>
-                        </a>
+                                
+                            </a>
+
+                        {% else %}
+                            <a class="page-link" href="/dashboard/page/edit/{{ page.uuid }}">
+                                <div class="page-bg" style="background: url({{ page.feature }}) no-repeat center center / cover">
+                                    <label>
+                                        {{ page.title }}
+                                    </label>
+                                    <div id="meta">
+                                        {{ include("dash/partials/recent-options.twig") }}
+                                    </div>
+                                </div>
+                            </a>
+                        {% endif %}
+                        
                     {% endfor %}
                     {% if numOfPages > 1 %}
                         <div class="paginate">
diff --git a/brain/views/dash/forms/login.twig b/brain/views/dash/forms/login.twig
index 248c978..3ddbb06 100644
--- a/brain/views/dash/forms/login.twig
+++ b/brain/views/dash/forms/login.twig
@@ -1,7 +1,7 @@
 <div id="dash-login">
     <div id="dash-form" class="dash-form">
         <img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
-        <form id="login" class='login' name="login" method="post">
+        <form id="login" class='login' name="login">
             <input type="text" name="handle" class="form-control" placeholder="Handle" required ">
                 <input type="password" name="password" class="form-control" placeholder="Password" required">
                     <button id="login-btn" class='login-btn' type='submit'>
diff --git a/brain/views/dash/page-edit.twig b/brain/views/dash/page-edit.twig
index 906fe56..a7e0612 100644
--- a/brain/views/dash/page-edit.twig
+++ b/brain/views/dash/page-edit.twig
@@ -34,7 +34,7 @@
 {% endblock %}
 
 {% block stylesheets %}
-  <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=drtryu">
+  <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=vbhj">
   {% endblock %}
 
   {% block mainContent %}
diff --git a/brain/views/dash/partials/index.twig b/brain/views/dash/partials/index.twig
index 379eb0e..5c3586b 100644
--- a/brain/views/dash/partials/index.twig
+++ b/brain/views/dash/partials/index.twig
@@ -27,17 +27,23 @@
             {% for page in data['pages'] %}
                 {% if page.media[0].type == 'mp4' %}
 
-                    <a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-video-link">
+                    <a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="page-link">
                         <video class="post-video" loop muted autoplay>
                             <source src="{{ page.media[0].file }}" type="video/mp4">
 
                             Sorry, your browser doesn't support embedded videos.
                         </video>
+                        <label>
+                           {{ page.title }}
+                        </label>
                         {{ include("dash/partials/recent-options.twig") }}
                     </a>
 
                 {% else %}
                     <a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link" style="background: url({{ page.media[0].file }}) no-repeat center center / cover">
+                        <label>
+                           {{ page.title }}
+                        </label>
 
                         {{ include("dash/partials/recent-options.twig") }}
                     </a>
diff --git a/brain/views/dash/partials/recent-options.twig b/brain/views/dash/partials/recent-options.twig
index 1c0dc22..c7e8096 100644
--- a/brain/views/dash/partials/recent-options.twig
+++ b/brain/views/dash/partials/recent-options.twig
@@ -1,6 +1,3 @@
-<label>
-   {{ page.title }}
-</label>
 <div id="options">
     {% if page.menu == 'true' %}
         {% set menu = "true" %}
diff --git a/public/assets/css/dash.css b/public/assets/css/dash.css
index f361754..5064d78 100644
--- a/public/assets/css/dash.css
+++ b/public/assets/css/dash.css
@@ -2947,15 +2947,17 @@ select {
   vertical-align: top;
   width: 100%;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg, #post-index #post-index-wrapper #posts-list a.page-link div.page-video {
   width: 100%;
   height: 350px;
   background-color: #fc6399;
   position: relative;
-  text-shadow: 2px 2px 0 #32302f;
-  text-shadow: 2px 2px 0 #32302f;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg label {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg video, #post-index #post-index-wrapper #posts-list a.page-link div.page-video video {
+  width: 100%;
+  position: absolute;
+}
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg label, #post-index #post-index-wrapper #posts-list a.page-link div.page-video label {
   font-size: 2em;
   font-weight: 700;
   color: #EFEBE3;
@@ -2967,8 +2969,9 @@ select {
   text-align: center;
   position: relative;
   top: 35%;
+  text-shadow: 2px 2px 0 #32302f;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta, #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta {
   width: 100%;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
   border-radius: 3px;
@@ -2977,51 +2980,55 @@ select {
   position: absolute;
   padding: 0 0 20px 0;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options, #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta #options {
   width: 100%;
   bottom: 0;
   position: absolute;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left, #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta #options #option-left {
   display: inline-block;
   vertical-align: top;
   width: 50%;
   position: relative;
   background: none;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button, #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta #options #option-left button {
   border-radius: 3px;
   background: #1D3040;
   margin: 0 0 10px 10px;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left svg {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left svg, #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta #options #option-left svg {
+  -moz-transition: all 0.1s linear;
+  -webkit-transition: all 0.1s linear;
+  -o-transition: all 0.1s linear;
+  transition: all 0.1s linear;
   width: 40px;
   height: 20px;
   fill: #b2cce5;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left .item-options {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left .item-options, #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta #options #option-left .item-options {
   border-radius: 3px;
   margin: 5px;
   display: inline-block;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=false] {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=false], #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta #options #option-left button[data-active=false] {
   background: #1D3040;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left svg {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=false] svg, #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta #options #option-left button[data-active=false] svg {
   fill: #b2cce5;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true] {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true], #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta #options #option-left button[data-active=true] {
   background: #f5ab35;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left svg {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true] svg, #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta #options #option-left button[data-active=true] svg {
   fill: #1D3040;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-right {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-right, #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta #options #option-right {
   display: inline-block;
   width: 50%;
   text-align: right;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-right span {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-right span, #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta #options #option-right span {
   font-weight: bold;
   display: block;
   background: #EFEBE3;
diff --git a/src/styles/main/_posts.sass b/src/styles/main/_posts.sass
index 00af72c..9ceed08 100644
--- a/src/styles/main/_posts.sass
+++ b/src/styles/main/_posts.sass
@@ -55,7 +55,10 @@
                     vertical-align: top
                     width: 100%
 
-                div.page-bg
+                div.page-bg, div.page-video
+                    video
+                        width: 100%
+                        position: absolute
                     width: 100%
                     height: 350px
                     background-color: $highlight
@@ -72,8 +75,7 @@
                         text-align: center
                         position: relative
                         top: 35%
-                    @include text-drop-shadow($black, 1, 2px, 2px, 0)
-                    @include text-drop-shadow($black, 1, 2px, 2px, 0)
+                        @include text-drop-shadow($black, 1, 2px, 2px, 0)
                     #meta
                         width: 100%
                         background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)
@@ -97,7 +99,7 @@
                                     background: $primary
                                     margin: 0 0 10px 10px
                                 svg
-                                    //@include object-transitions(0.1s)
+                                    @include object-transitions(0.1s)
                                     width: 40px
                                     height: 20px
                                     fill: $secondary
@@ -107,13 +109,13 @@
                                     display: inline-block
                                 button[data-active='false']
                                     background: $primary
-                                svg
-                                    fill: $secondary
+                                    svg
+                                        fill: $secondary
 
                                 button[data-active='true']
                                     background: $tertiary
-                                svg
-                                    fill: $primary
+                                    svg
+                                        fill: $primary
                             #option-right
                                 display: inline-block
                                 width: 50%