projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

fixed weird form post bug, updated page listing display for new assets

Browse source
This commit is contained in:
Ro 2022-03-13 14:22:22 -07:00
parent fe74fd6e07
commit 523b611ac5
7 changed files with 72 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
brain/views/dash/book.twig
View file

@ -5,7 +5,7 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% 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 %} {% endblock %}
{% block mainContent %} {% block mainContent %}
@ -45,58 +45,37 @@
</div> </div>
<div id="posts-list"> <div id="posts-list">
{% for page in pages %} {% for page in pages %}
<a class="page-link" href="/dashboard/page/edit/{{ page.uuid }}"> {% if page.media[0].type == 'mp4' %}
<div class="page-bg" style="background: url({{ page.feature }}) no-repeat center center / cover"> <a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="page-link">
<label> <div class="page-video">
{{ page.title }} <video class="post-video" loop muted autoplay>
</label> <source src="{{ page.media[0].file }}" type="video/mp4">
<div id="meta">
<div id="options"> Sorry, your browser doesn't support embedded videos.
{% if page.menu == 'true' %} </video>
{% set menu = "true" %} <label>
{% else %} {{ page.title }}
{% set menu = "false" %} </label>
{% endif %} <div id="meta">
{% if page.published == 'true' %} {{ include("dash/partials/recent-options.twig") }}
{% 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> </div>
</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 %} {% endfor %}
{% if numOfPages > 1 %} {% if numOfPages > 1 %}
<div class="paginate"> <div class="paginate">

2
brain/views/dash/forms/login.twig
View file

@ -1,7 +1,7 @@
<div id="dash-login"> <div id="dash-login">
<div id="dash-form" class="dash-form"> <div id="dash-form" class="dash-form">
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/> <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="text" name="handle" class="form-control" placeholder="Handle" required ">
<input type="password" name="password" class="form-control" placeholder="Password" required"> <input type="password" name="password" class="form-control" placeholder="Password" required">
<button id="login-btn" class='login-btn' type='submit'> <button id="login-btn" class='login-btn' type='submit'>

2
brain/views/dash/page-edit.twig
View file

@ -34,7 +34,7 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% 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 %} {% endblock %}
{% block mainContent %} {% block mainContent %}

8
brain/views/dash/partials/index.twig
View file

@ -27,17 +27,23 @@
{% for page in data['pages'] %} {% for page in data['pages'] %}
{% if page.media[0].type == 'mp4' %} {% 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> <video class="post-video" loop muted autoplay>
<source src="{{ page.media[0].file }}" type="video/mp4"> <source src="{{ page.media[0].file }}" type="video/mp4">
Sorry, your browser doesn't support embedded videos. Sorry, your browser doesn't support embedded videos.
</video> </video>
<label>
{{ page.title }}
</label>
{{ include("dash/partials/recent-options.twig") }} {{ include("dash/partials/recent-options.twig") }}
</a> </a>
{% else %} {% 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"> <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") }} {{ include("dash/partials/recent-options.twig") }}
</a> </a>

3
brain/views/dash/partials/recent-options.twig
View file

@ -1,6 +1,3 @@
<label>
{{ page.title }}
</label>
<div id="options"> <div id="options">
{% if page.menu == 'true' %} {% if page.menu == 'true' %}
{% set menu = "true" %} {% set menu = "true" %}

39
public/assets/css/dash.css
View file

@ -2947,15 +2947,17 @@ select {
vertical-align: top; vertical-align: top;
width: 100%; 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%; width: 100%;
height: 350px; height: 350px;
background-color: #fc6399; background-color: #fc6399;
position: relative; 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-size: 2em;
font-weight: 700; font-weight: 700;
color: #EFEBE3; color: #EFEBE3;
@ -2967,8 +2969,9 @@ select {
text-align: center; text-align: center;
position: relative; position: relative;
top: 35%; 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%; width: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
border-radius: 3px; border-radius: 3px;
@ -2977,51 +2980,55 @@ select {
position: absolute; position: absolute;
padding: 0 0 20px 0; 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%; width: 100%;
bottom: 0; bottom: 0;
position: absolute; 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; display: inline-block;
vertical-align: top; vertical-align: top;
width: 50%; width: 50%;
position: relative; position: relative;
background: none; 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; border-radius: 3px;
background: #1D3040; background: #1D3040;
margin: 0 0 10px 10px; 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; width: 40px;
height: 20px; height: 20px;
fill: #b2cce5; 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; border-radius: 3px;
margin: 5px; margin: 5px;
display: inline-block; 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; 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; 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; 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; 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; display: inline-block;
width: 50%; width: 50%;
text-align: right; 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; font-weight: bold;
display: block; display: block;
background: #EFEBE3; background: #EFEBE3;

18
src/styles/main/_posts.sass
View file

@ -55,7 +55,10 @@
vertical-align: top vertical-align: top
width: 100% width: 100%
div.page-bg div.page-bg, div.page-video
video
width: 100%
position: absolute
width: 100% width: 100%
height: 350px height: 350px
background-color: $highlight background-color: $highlight
@ -72,8 +75,7 @@
text-align: center text-align: center
position: relative position: relative
top: 35% 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 #meta
width: 100% width: 100%
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 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 background: $primary
margin: 0 0 10px 10px margin: 0 0 10px 10px
svg svg
//@include object-transitions(0.1s) @include object-transitions(0.1s)
width: 40px width: 40px
height: 20px height: 20px
fill: $secondary fill: $secondary
@ -107,13 +109,13 @@
display: inline-block display: inline-block
button[data-active='false'] button[data-active='false']
background: $primary background: $primary
svg svg
fill: $secondary fill: $secondary
button[data-active='true'] button[data-active='true']
background: $tertiary background: $tertiary
svg svg
fill: $primary fill: $primary
#option-right #option-right
display: inline-block display: inline-block
width: 50% width: 50%