projects/fipamo
1
0
Fork 0
Code Issues 24 Pull requests Projects 1 Releases 22 Packages Wiki Activity

UI design tweaks

Browse source 
There were some inconsistencies in the UI due to all the changes that
were made to the styleshets, so I fixed the obvious ones that were show
stoppers.

There's more in there to be smoothed out, so this is just the start.
This commit is contained in:
Are0h 2022-05-10 18:05:41 -07:00
parent b8b763637f
commit 2501a19685
7 changed files with 195 additions and 195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,7 @@
{% set slug = page['slug'] %} {% set slug = page['slug'] %}
{% set layout = page['layout'] %} {% set layout = page['layout'] %}
{% set feature = page['feature'] %} {% set feature = page['feature'] %}
{% set _title = page['title'] %} {% set title = page['title'] %}
{% set tags = page['tags'] %} {% set tags = page['tags'] %}
{% set content = page['content'] %} {% set content = page['content'] %}
{% set date = page['created'] %} {% set date = page['created'] %}
@ -119,7 +119,7 @@
<div id="post-title" class="column"> <div id="post-title" class="column">
<label>TITLE</label> <label>TITLE</label>
<textarea id="post-title-text " type="text" name="post-title-text " class="post-edit" placeholder="TITLE"> <textarea id="post-title-text " type="text" name="post-title-text " class="post-edit" placeholder="TITLE">
{{ - _title - }} {{ title }}
</textarea> </textarea>
<div id="layouts"> <div id="layouts">
@ -143,7 +143,7 @@
<div id="post-meta" class="column"> <div id="post-meta" class="column">
<label>TAGS</label> <label>TAGS</label>
<textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]"> <textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">
{{ - tags - }} {{ tags }}
</textarea> </textarea>
<label>OPTIONS</label> <label>OPTIONS</label>
{% apply spaceless %} {% apply spaceless %}
@ -163,7 +163,7 @@
{{ include("dash/partials/editor.twig") }} {{ include("dash/partials/editor.twig") }}
{% endapply %} {% endapply %}
<div id="edit-post-wrapper"> <div id="edit-post-wrapper">
<textarea id="edit" spellcheck="false">{{ - content - }}</textarea> <textarea id="edit" spellcheck="false">{{ content }}</textarea>
<pre id="highlight"> <pre id="highlight">
<code id="highlight-content" class="language-md"> <code id="highlight-content" class="language-md">

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

@ -1,58 +1,58 @@
<div id="dash-recent"> <div id="dash-recent">
<div id="recent-list"> <div id="recent-list">
<div class="recent-header"> <div class="recent-header">
<div class="index-header-left"> <div class="index-header-left">
Recent Recent
</div> </div>
<div class="index-header-right"> <div class="index-header-right">
<a href='/dashboard/pages' title="view pages"> <a href='/dashboard/pages' title="view pages">
<button> <button>
<svg class="page-link"> <svg class="page-link">
<use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/> <use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>
</svg> </svg>
</button> </button>
</a> </a>
<a href='/dashboard/page/add/new' title="add new page">
<button>
<svg class="page-link">
<use xlink:href="/assets/images/global/sprite.svg#entypo-plus"/>
</svg>
</button>
</a>
</div>
</div>
<br/>
{% if data["entryCount"] != 0 %}
{% 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/add/new' title="add new page">
<video class="post-video" loop muted autoplay> <button>
<source src="{{ page.media[0].file }}" type="video/mp4"> <svg class="page-link">
<use xlink:href="/assets/images/global/sprite.svg#entypo-plus"/>
</svg>
</button>
</a>
</div>
</div>
<br/>
{% if data["entryCount"] != 0 %}
{% for page in data['pages'] %}
{% if page.media[0].type == 'mp4' %}
Sorry, your browser doesn't support embedded videos. <a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-video-link recent-link">
</video> <video class="post-video" loop muted autoplay>
<label> <source src="{{ page.media[0].file }}" type="video/mp4">
{{ page.title }}
</label>
{{ include("dash/partials/recent-options.twig") }}
</a>
{% else %} Sorry, your browser doesn't support embedded videos.
<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"> </video>
<label> <label>
{{ page.title }} {{ page.title }}
</label> </label>
{{ include("dash/partials/recent-options.twig") }}
</a>
{{ include("dash/partials/recent-options.twig") }} {% else %}
</a> <a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link recent-link" style="background: url({{ page.media[0].file }}) no-repeat center center / cover">
{% endif %} <label>
{{ page.title }}
{% endfor %} </label>
{% else %}
There are no pages
{% endif %}
</div> {{ include("dash/partials/recent-options.twig") }}
</div> </a>
{% endif %}
{% endfor %}
{% else %}
There are no pages
{% endif %}
</div>
</div>

4
brain/views/dash/start.twig
View file

@ -5,7 +5,7 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adfdff"> <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=acvcnh">
{% endblock %} {% endblock %}
{% block mainContent %} {% block mainContent %}
@ -23,5 +23,5 @@
{% endblock %} {% endblock %}
{% block javascripts %} {% block javascripts %}
<script src="/assets/scripts/Start.js?=dfdfsdf" type="text/javascript"></script> <script src="/assets/scripts/Start.js?=dfadsf" type="text/javascript"></script>
{% endblock %} {% endblock %}

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

@ -2458,19 +2458,19 @@ svg.icons {
margin: 0 10px 0 0; margin: 0 10px 0 0;
bottom: -15px; bottom: -15px;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(3) { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(3) {
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
height: 500px; height: 500px;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(4), #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(4),
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(6) { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(6) {
width: 48.6%; width: 48.6%;
height: 350px; height: 350px;
margin: 0 10px 20px 0; margin: 0 10px 20px 0;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(5), #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(5),
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(7) { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(7) {
width: 48.6%; width: 48.6%;
height: 350px; height: 350px;
margin: 0 0 20px 10px; margin: 0 0 20px 10px;

66
public/assets/scripts/Start.js
View file

@ -1638,7 +1638,7 @@ class PostEditor {
//-------------------------- //--------------------------
constructor(){ constructor(){
this.processing = false; this.processing = false;
let self = 'this'; let self = "this";
this.admin = new _fipamoAdminAPIDefault.default(null, document.getElementById('notify-progress')); this.admin = new _fipamoAdminAPIDefault.default(null, document.getElementById('notify-progress'));
this.mm = new _maintenanceManagerDefault.default(null, null, document.getElementById('notify-progress')); this.mm = new _maintenanceManagerDefault.default(null, null, document.getElementById('notify-progress'));
this.urlPieces = document.URL.split('/'); this.urlPieces = document.URL.split('/');
@ -1663,7 +1663,7 @@ class PostEditor {
this.editor.addListener(_editorEvent.EDITOR_SAVE, ()=>this.handleEditorOptions(_editorEvent.EDITOR_SAVE) this.editor.addListener(_editorEvent.EDITOR_SAVE, ()=>this.handleEditorOptions(_editorEvent.EDITOR_SAVE)
, false); , false);
document.getElementById('post-image-upload').addEventListener('change', (e)=>{ document.getElementById('post-image-upload').addEventListener('change', (e)=>{
this.handleImageUpload(e.target.id, e.target.files); self.handleImageUpload(e.target.id, e.target.files);
}, false); }, false);
/* /*
TinyDatePicker(document.getElementById('post-date'), { TinyDatePicker(document.getElementById('post-date'), {
@ -4012,14 +4012,14 @@ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
parcelHelpers.defineInteropFlag(exports); parcelHelpers.defineInteropFlag(exports);
var _animeEsJs = require("animejs/lib/anime.es.js"); var _animeEsJs = require("animejs/lib/anime.es.js");
var _animeEsJsDefault = parcelHelpers.interopDefault(_animeEsJs); var _animeEsJsDefault = parcelHelpers.interopDefault(_animeEsJs);
const notifcation = document.getElementById("notifications"); const notifcation = document.getElementById('notifications');
const notify = document.getElementById("notifyMessage"); const notify = document.getElementById('notify-message');
const messageText = document.getElementById("message-text"); const messageText = document.getElementById('message-text');
const notifyText = document.getElementById("notify-text"); const notifyText = document.getElementById('notify-text');
const notifyProgress = document.getElementById("notify-progress"); const notifyProgress = document.getElementById('notify-progress');
const iconGood = document.getElementById("notify-good"); const iconGood = document.getElementById('notify-good');
const iconLame = document.getElementById("notify-lame"); const iconLame = document.getElementById('notify-lame');
const iconWorking = document.getElementById("notify-working"); const iconWorking = document.getElementById('notify-working');
class Notfications { class Notfications {
//-------------------------- //--------------------------
// constructor // constructor
@ -4029,66 +4029,66 @@ class Notfications {
// methods // methods
//-------------------------- //--------------------------
alert(text, status) { alert(text, status) {
iconWorking.style.display = "none"; iconWorking.style.display = 'none';
iconGood.style.display = "none"; iconGood.style.display = 'none';
iconLame.style.display = "none"; iconLame.style.display = 'none';
var color = ""; var color = '';
if (status !== null) { if (status !== null) {
_animeEsJsDefault.default({ _animeEsJsDefault.default({
targets: notifyProgress, targets: notifyProgress,
opacity: 0, opacity: 0,
easing: "easeInOutQuint", easing: 'easeInOutQuint',
duration: 500 duration: 500
}); });
if (status) { if (status) {
color = "#32cd32"; color = '#32cd32';
iconWorking.style.display = "none"; iconWorking.style.display = 'none';
iconGood.style.display = "block"; iconGood.style.display = 'block';
} else { } else {
color = "#F64747"; color = '#F64747';
iconWorking.style.display = "none"; iconWorking.style.display = 'none';
iconLame.style.display = "block"; iconLame.style.display = 'block';
} }
} else { } else {
color = "#200317"; color = '#200317';
iconWorking.style.display = "block"; iconWorking.style.display = 'block';
_animeEsJsDefault.default({ _animeEsJsDefault.default({
targets: notifyProgress, targets: notifyProgress,
opacity: 1, opacity: 1,
easing: "easeInOutQuint", easing: 'easeInOutQuint',
duration: 500 duration: 500
}); });
} }
messageText.innerHTML = text; messageText.innerHTML = text;
_animeEsJsDefault.default({ _animeEsJsDefault.default({
targets: notifcation, targets: notifcation,
marginTop: "-10", marginTop: '-10',
easing: "easeInOutQuint", easing: 'easeInOutQuint',
duration: 10, duration: 10,
complete: ()=>{ complete: ()=>{
_animeEsJsDefault.default({ _animeEsJsDefault.default({
targets: notify, targets: notify,
rotateX: "0", rotateX: '0',
easing: "easeInOutQuint", easing: 'easeInOutQuint',
duration: 700 duration: 700
}); });
_animeEsJsDefault.default({ _animeEsJsDefault.default({
targets: notifyText, targets: notifyText,
backgroundColor: color, backgroundColor: color,
easing: "easeInOutQuint", easing: 'easeInOutQuint',
duration: 700, duration: 700,
complete: ()=>{ complete: ()=>{
setTimeout(()=>{ setTimeout(()=>{
if (status !== null) _animeEsJsDefault.default({ if (status !== null) _animeEsJsDefault.default({
targets: notify, targets: notify,
rotateX: "-120", rotateX: '-120',
easing: "easeInOutQuint", easing: 'easeInOutQuint',
duration: 700, duration: 700,
complete: ()=>{ complete: ()=>{
_animeEsJsDefault.default({ _animeEsJsDefault.default({
targets: notifcation, targets: notifcation,
marginTop: "-55", marginTop: '-55',
easing: "easeInOutQuint", easing: 'easeInOutQuint',
delay: 700, delay: 700,
duration: 50 duration: 50
}); //notifcation.style.display = 'none'; }); //notifcation.style.display = 'none';

188
src/com/ui/Notifications.js
View file

@ -1,101 +1,101 @@
import anime from "animejs/lib/anime.es.js"; import anime from 'animejs/lib/anime.es.js';
const notifcation = document.getElementById("notifications"); const notifcation = document.getElementById('notifications');
const notify = document.getElementById("notifyMessage"); const notify = document.getElementById('notify-message');
const messageText = document.getElementById("message-text"); const messageText = document.getElementById('message-text');
const notifyText = document.getElementById("notify-text"); const notifyText = document.getElementById('notify-text');
const notifyProgress = document.getElementById("notify-progress"); const notifyProgress = document.getElementById('notify-progress');
const iconGood = document.getElementById("notify-good"); const iconGood = document.getElementById('notify-good');
const iconLame = document.getElementById("notify-lame"); const iconLame = document.getElementById('notify-lame');
const iconWorking = document.getElementById("notify-working"); const iconWorking = document.getElementById('notify-working');
export default class Notfications { export default class Notfications {
//-------------------------- //--------------------------
// constructor // constructor
//-------------------------- //--------------------------
constructor() {} constructor() {}
//-------------------------- //--------------------------
// methods // methods
//-------------------------- //--------------------------
alert(text, status) { alert(text, status) {
iconWorking.style.display = "none"; iconWorking.style.display = 'none';
iconGood.style.display = "none"; iconGood.style.display = 'none';
iconLame.style.display = "none"; iconLame.style.display = 'none';
var color = ""; var color = '';
if (status !== null) { if (status !== null) {
anime({ anime({
targets: notifyProgress, targets: notifyProgress,
opacity: 0, opacity: 0,
easing: "easeInOutQuint", easing: 'easeInOutQuint',
duration: 500 duration: 500
}); });
if (status) { if (status) {
color = "#32cd32"; color = '#32cd32';
iconWorking.style.display = "none"; iconWorking.style.display = 'none';
iconGood.style.display = "block"; iconGood.style.display = 'block';
} else { } else {
color = "#F64747"; color = '#F64747';
iconWorking.style.display = "none"; iconWorking.style.display = 'none';
iconLame.style.display = "block"; iconLame.style.display = 'block';
} }
} else { } else {
color = "#200317"; color = '#200317';
iconWorking.style.display = "block"; iconWorking.style.display = 'block';
anime({ anime({
targets: notifyProgress, targets: notifyProgress,
opacity: 1, opacity: 1,
easing: "easeInOutQuint", easing: 'easeInOutQuint',
duration: 500 duration: 500
}); });
} }
messageText.innerHTML = text; messageText.innerHTML = text;
anime({ anime({
targets: notifcation, targets: notifcation,
marginTop: "-10", marginTop: '-10',
easing: "easeInOutQuint", easing: 'easeInOutQuint',
duration: 10, duration: 10,
complete: () => { complete: () => {
anime({ anime({
targets: notify, targets: notify,
rotateX: "0", rotateX: '0',
easing: "easeInOutQuint", easing: 'easeInOutQuint',
duration: 700 duration: 700
}); });
anime({ anime({
targets: notifyText, targets: notifyText,
backgroundColor: color, backgroundColor: color,
easing: "easeInOutQuint", easing: 'easeInOutQuint',
duration: 700, duration: 700,
complete: () => { complete: () => {
setTimeout(() => { setTimeout(() => {
if (status !== null) { if (status !== null) {
anime({ anime({
targets: notify, targets: notify,
rotateX: "-120", rotateX: '-120',
easing: "easeInOutQuint", easing: 'easeInOutQuint',
duration: 700, duration: 700,
complete: () => { complete: () => {
anime({ anime({
targets: notifcation, targets: notifcation,
marginTop: "-55", marginTop: '-55',
easing: "easeInOutQuint", easing: 'easeInOutQuint',
delay: 700, delay: 700,
duration: 50 duration: 50
}); });
//notifcation.style.display = 'none'; //notifcation.style.display = 'none';
} }
}); });
} }
}, 1000); }, 1000);
} }
}); });
} }
}); });
} }
//-------------------------- //--------------------------
// event handlers // event handlers
//-------------------------- //--------------------------
} }

10
src/styles/main/_index.scss
View file

@ -292,21 +292,21 @@
} }
} }
a.dash-link:nth-child(3) { a.recent-link:nth-child(3) {
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
height: 500px; height: 500px;
} }
a.dash-link:nth-child(4), a.recent-link:nth-child(4),
a.dash-link:nth-child(6) { a.recent-link:nth-child(6) {
width: 48.6%; width: 48.6%;
height: 350px; height: 350px;
margin: 0 10px 20px 0; margin: 0 10px 20px 0;
} }
a.dash-link:nth-child(5), a.recent-link:nth-child(5),
a.dash-link:nth-child(7) { a.recent-link:nth-child(7) {
width: 48.6%; width: 48.6%;
height: 350px; height: 350px;
margin: 0 0 20px 10px; margin: 0 0 20px 10px;