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 %}
{% 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">
{% 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">
<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>
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">

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

@ -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'>

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

@ -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 %}

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

@ -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>

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

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

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

@ -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;

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

@ -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%