projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 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 layout = page['layout'] %}
{% set feature = page['feature'] %}
{% set _title = page['title'] %}
{% set title = page['title'] %}
{% set tags = page['tags'] %}
{% set content = page['content'] %}
{% set date = page['created'] %}
@ -119,7 +119,7 @@
<div id="post-title" class="column">
<label>TITLE</label>
<textarea id="post-title-text " type="text" name="post-title-text " class="post-edit" placeholder="TITLE">
{{ - _title - }}
{{ title }}
</textarea>
<div id="layouts">
@ -143,7 +143,7 @@
<div id="post-meta" class="column">
<label>TAGS</label>
<textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">
{{ - tags - }}
{{ tags }}
</textarea>
<label>OPTIONS</label>
{% apply spaceless %}
@ -163,7 +163,7 @@
{{ include("dash/partials/editor.twig") }}
{% endapply %}
<div id="edit-post-wrapper">
<textarea id="edit" spellcheck="false">{{ - content - }}</textarea>
<textarea id="edit" spellcheck="false">{{ content }}</textarea>
<pre id="highlight">
<code id="highlight-content" class="language-md">

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

@ -27,7 +27,7 @@
{% 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="post-video-link recent-link">
<video class="post-video" loop muted autoplay>
<source src="{{ page.media[0].file }}" type="video/mp4">
@ -40,7 +40,7 @@
</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">
<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">
<label>
{{ page.title }}
</label>
@ -55,4 +55,4 @@
{% endif %}
</div>
</div>
</div>

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

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

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

@ -2458,19 +2458,19 @@ svg.icons {
margin: 0 10px 0 0;
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%;
margin-bottom: 20px;
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.dash-link:nth-child(6) {
#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.recent-link:nth-child(6) {
width: 48.6%;
height: 350px;
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.dash-link:nth-child(7) {
#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.recent-link:nth-child(7) {
width: 48.6%;
height: 350px;
margin: 0 0 20px 10px;

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

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

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

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

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%;
margin-bottom: 20px;
height: 500px;
}
a.dash-link:nth-child(4),
a.dash-link:nth-child(6) {
a.recent-link:nth-child(4),
a.recent-link:nth-child(6) {
width: 48.6%;
height: 350px;
margin: 0 10px 20px 0;
}
a.dash-link:nth-child(5),
a.dash-link:nth-child(7) {
a.recent-link:nth-child(5),
a.recent-link:nth-child(7) {
width: 48.6%;
height: 350px;
margin: 0 0 20px 10px;