fipamo/brain/views/dash/page-edit.twig
Ro 07b422a9c3
CSS Overhaul Part 1
This one is a doozy, so let's breakt it down into what areas where
touched.

-   updated package json to remove unneeded dependencies.
-   rebuilt file uploading to simply a very convuluted process
-   began proces to replace icons with https://tabler-icons.io
-   began process of removing the need for css preprocessor and using
    pure css
        - login completed
        - dashboard index completed
        - page edit ui completed
- page edit ui text editor tweaked so syntax highlighting is cleaner and
  more accurate

The settings and navigation UIs still remain and then polishing the
responsive for the new css structure
2023-03-23 13:55:34 -07:00

208 lines
6.6 KiB
Twig

{% extends "dash/_frame.twig" %}
{#
if page is in 'edit' mode, set variables
if not, just make them empty
#}
{% if mode == 'edit' %}
{% set id = page['id'] %}
{% set uuid = page['uuid'] %}
{% set slug = page['slug'] %}
{% set layout = page['layout'] %}
{% set feature = page['feature'] %}
{% set title = page['title'] %}
{% set tags = page['tags'] %}
{% set content = page['content'] %}
{% set date = page['created'] %}
{% set updated = page['updated'] %}
{% set media = page['media'] %}
{% set files = page['docs'] %}
{% else %}
{% set id = '' %}
{% set uuid = '' %}
{% set slug = '' %}
{% set layout = 'page' %}
{% set feature = '' %}
{% set title = '' %}
{% set tags = '' %}
{% set content = '' %}
{% set date = '' %}
{% set updated = '' %}
{% set media = '' %}
{% set files = '' %}
{% endif %}
{% block title %}
{{ title }}
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash/start.css?=vdthg">
{% endblock %}
{% block mainContent %}
<section data-index="{{ id }}" data-uuid="{{ uuid }}" data-slug="{{ slug }}" data-layout="{{ layout }}" role="file-manager">
{% if page['feature'] == null %}
<div role="file-drop">
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
</div>
<label role="list-title">IMAGES AND VIDEO</label>
<div role="page-images-list"></div>
<label role="list-title">FILES</label>
<div role="page-files-list"></div>
{% else %}
<div role="file-drop">
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
</div>
<label role="list-title">IMAGES AND VIDEO</label>
<div role="page-images-list">
{% if media|length > 1 %}
{% for item in media %}
{% set fileName = item.file|split('/') %}
{% if item.type == "mp4" %}
<div id="{{ loop.index0 }}" class="video-item" data-source="{{ item.file }}">
<video>
<source src="{{ item.file }}"/>
</video>
<button id="{{ loop.index0 }}" class="media-remove">
<i class="ti ti-x"></i>
</button>
</div>
{% else %}
<div id="{{ loop.index0 }}" class="img-item" data-source="{{ item.file }}" style="background: url({{ item.file }}) no-repeat center center / cover">
<button id="{{ loop.index0 }}" class="media-remove">
<i class="ti ti-x"></i>
</button>
</div>
{% endif %}
{% endfor %}
{% else %}
{% if media[0] != '' %}
{% set fileName = media[0].file|split('/') %}
{% if media[0].type == "mp4" %}
<div id="0" class="video-item" data-source="{{ media[0].file }}">
<button id="{{ loop.index0 }}" class="media-remove">X</button>
</div>
{% else %}
<div id="0" class="img-item" data-source="{{ media[0].file }}" style="background: url({{ media[0].file }}) no-repeat center center / cover">
<button id="{{ loop.index0 }}" class="media-remove">
<i class="ti ti-x"></i>
</button>
</div>
{% endif %}
{% else %}
{% endif %}
{% endif %}
</div>
<label role="list-title">FILES</label>
<div role="page-files-list">
{% if files|length > 1 %}
{% for item in files %}
{% set fileName = item.file|split('/') %}
{% if item.type == "mp3" %}
<div id="{{ loop.index0 }}" class="audio-item" data-source="{{ item.file }}">
<audio controls>
<source src="{{ item.file }}"/>
</audio>
<button id="{{ loop.index0 }}" class="media-remove">
<i class="ti ti-x"></i>
</button>
</div>
{% else %}
<div id="{{ loop.index0 }}" class="file-item" data-source="{{ item.file }}">
<a href="{{ item.file }}" target="_blank">{{ fileName[6] }}"</a>
<button id="{{ loop.index0 }}" class="media-remove">
<i class="ti ti-x"></i>
</button>
</div>
{% endif %}
{% endfor %}
{% else %}
{% if files[0] != '' %}
{% set fileName = files[0].file|split('/') %}
{% if files[0].type == "mp3" %}
<div id="0" class="audio-item" data-source="{{ files[0].file }}">
<audio controls>
<source src="{{ files[0].file }}"/>
</audio>
<button id="{{ loop.index0 }}" class="media-remove">
<i class="ti ti-x"></i>
</button>
</div>
{% else %}
<div id="0" class="file-item" data-source="{{ files[0].file }}">
<a href="{{ item.file }}" target="_blank">{{ fileName[6] }}"</a>
<button id="{{ loop.index0 }}" class="media-remove">
<i class="ti ti-x"></i>
</button>
</div>
{% endif %}
{% else %}
{% endif %}
{% endif %}
</div>
{% endif %}
</section>
<section role="page-meta">
<div role="page-meta-wrapper">
<div role="page-title">
<strong>TITLE</strong>
<textarea id="post-title-text" type="text" name="post-title-text" class="post-edit" placeholder="TITLE">{{ title }}</textarea>
</div>
<div role="page-tags">
<strong>TAGS</strong>
<textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">{{ tags }}</textarea>
</div>
<div role="page-layouts">
<strong>LAYOUTS</strong>
<select id="page-templates">
{% for view in views %}
{% if view == page['layout'] %}
<option value={{ view }} selected>{{ view }}</option>
{% else %}
<option value={{ view }}>{{ view }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div role="page-options">
<strong>OPTIONS</strong>
{% apply spaceless %}
{{ include("dash/partials/options.twig") }}
{% endapply %}
</div>
<div role="page-updated">
<strong>UPDATED</strong>
<span id="post-date" type="text">
{{ updated }}
</span>
</div>
<div role="page-created">
<strong>CREATED</strong>
<span id="post-date" type="text">
{{ date }}
</span>
<input id="page-files-upload" type="file" name="page-files-upload" multiple/>
<input id="post-image-upload" type="file" name="post-image-upload"/>
<input id="form_token" name="token" type="hidden" value="{{ token }}"></div>
</div>
</div>
</section>
<section role="text-editor">
{% apply spaceless %}
{{ include("dash/partials/editor.twig") }}
{% endapply %}
<div role="edit-post-wrapper">
<textarea id="edit" spellcheck="false">{{ content }}</textarea>
<pre id="highlight">
<code id="highlight-content" class="language-md"></code>
</pre>
</div>
</section>
{% endblock %}