Frontent dev env (#247)

* Added frontend development files/environment

* More items-categories related removals

* Improvements in pages templates (inc. static pages)

* Improvements in video player

* Added empty home page message + cta

* Updates in media, playlist and management pages

* Improvements in material icons font loading

* Replaced media & playlists links in frontend dev-env

* frontend package version update

* chnaged frontend dev url port

* static files update

* Changed default position of theme switcher

* enabled frontend docker container
This commit is contained in:
Yiannis Stergiou
2021-07-11 18:01:34 +03:00
committed by GitHub
parent 060bb45725
commit aa6520daac
555 changed files with 201927 additions and 66002 deletions

View File

@@ -0,0 +1,18 @@
<div id="app-header"></div>
<div id="app-sidebar"></div>
<div class="page-main-wrap">
<div class="page-main">
<div class="page-main-inner">
<div class="custom-page-wrapper">
<h2>About</h2>
<hr />
<p>
<a href="https://mediacms.io">MediaCMS</a> is a modern, fully featured open source video and media CMS. It is
developed to meet the needs of modern web platforms for viewing and sharing media.
</p>
</div>
</div>
<div class="page-sidebar-content-overlay"></div>
</div>
</div>
<div id="app-footer"></div>

View File

@@ -0,0 +1,144 @@
<div id="app-header"></div>
<div id="app-sidebar"></div>
<div class="page-main-wrap">
<div class="page-main">
<div class="page-main-inner">
<div class="media-uploader-wrap">
<div class="media-uploader-top-wrap">
<div class="media-uploader-top-left-wrap">
<h1>Upload media files</h1>
</div>
<div class="media-uploader-top-right-wrap"></div>
</div>
<div class="media-uploader">
<div class="media-uploader-bottom-wrap">
<div class="media-uploader-bottom-left-wrap">
<div class="media-drag-drop-wrap">
<div class="media-drag-drop-inner">
<div class="media-drag-drop-content">
<div class="media-drag-drop-content-inner">
<span><i class="material-icons">cloud_upload</i></span>
<span>Drag and drop files</span>
<span>or</span>
<span class="browse-files-btn-wrap">
<span
class="qq-upload-button-selector"
style="position: relative; overflow: hidden; direction: ltr"
>Browse your files<input
qq-button-id="9523a4a3-6688-40a5-b01d-7c72a79c7bcb"
title="file input"
multiple=""
type="file"
name="qqfile"
style="
position: absolute;
right: 0px;
top: 0px;
font-family: Arial;
font-size: 118px;
margin: 0px;
padding: 0px;
cursor: pointer;
opacity: 0;
height: 100%;
"
/></span>
</span>
<div class="qq-upload-drop-area-selector media-dropzone" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="media-uploader-bottom-right-wrap">
<ul class="media-upload-items-list qq-upload-list-selector">
<li>
<div class="media-upload-item-main">
<div class="media-upload-item-thumb">
<img class="qq-thumbnail-selector" alt="" />
<span class="media-upload-item-spinner qq-upload-spinner-selector"
><i class="material-icons">autorenew</i></span
>
<button type="button" class="qq-upload-retry-selector retry-media-upload-item" aria-label="Retry">
<i class="material-icons">refresh</i> Retry
</button>
</div>
<div class="media-upload-item-details">
<div class="media-upload-item-name">
<span class="media-upload-item-filename qq-upload-file-selector" title="">File #1</span>
<input
class="
media-upload-item-filename-input
qq-edit-filename-selector qq-edit-filename-icon-selector
"
tabindex="0"
type="text"
value="File #1"
/>
</div>
<div class="media-upload-item-details-bottom">
<div class="media-upload-item-progress-bar-container qq-progress-bar-container-selector">
<div
role="progressbar"
aria-valuenow="80"
aria-valuemin="0"
aria-valuemax="100"
class="media-upload-item-progress-bar qq-progress-bar-selector"
style="width: 80%"
></div>
</div>
<span class="media-upload-item-upload-size qq-upload-size-selector">80% of 7.5MB</span>
<span role="status" class="media-upload-item-status-text qq-upload-status-text-selector"
>Retrying 3/3...</span
>
</div>
<div class="media-upload-item-top-actions">
<span class="filename-edit qq-edit-filename-icon-selector" aria-label="Edit filename"
>Edit filename <i class="material-icons">create</i></span
>
<button
type="button"
class="delete-media-upload-item qq-upload-delete-selector"
aria-label="Delete"
>
Delete <i class="material-icons">delete</i>
</button>
<button
type="button"
class="cancel-media-upload-item qq-upload-cancel-selector"
aria-label="Cancel"
>
Cancel <i class="material-icons">cancel</i>
</button>
</div>
<div class="media-upload-item-bottom-actions">
<button
type="button"
class="continue-media-upload-item qq-upload-continue-selector"
aria-label="Continue"
>
<i class="material-icons">play_circle_outline</i> Continue
</button>
<button
type="button"
class="pause-media-upload-item qq-upload-pause-selector"
aria-label="Pause"
>
<i class="material-icons">pause_circle_outline</i> Pause
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="page-sidebar-content-overlay"></div>
</div>
</div>
<div id="app-footer"></div>

View File

@@ -0,0 +1,27 @@
<div id="app-header"></div>
<div id="app-sidebar"></div>
<div class="page-main-wrap">
<div class="page-main">
<div class="page-main-inner">
<div class="user-action-form-wrap">
<div class="user-action-form-inner">
<h1>Contact us</h1>
<form enctype="multipart/form-data" action="" method="post" class="post-form">
<p>
<label for="id_from_email">Your email:</label>
<input type="email" name="from_email" required="" id="id_from_email" />
</p>
<p><label for="id_name">Your name:</label> <input type="text" name="name" id="id_name" /></p>
<p>
<label for="id_message">Please add your message here and submit:</label>
<textarea name="message" cols="40" rows="10" required="" id="id_message"></textarea>
</p>
<button class="primaryAction" type="submit">Submit</button>
</form>
</div>
</div>
</div>
<div class="page-sidebar-content-overlay"></div>
</div>
</div>
<div id="app-footer"></div>

View File

@@ -0,0 +1,30 @@
<div id="app-header"></div>
<div id="app-sidebar"></div>
<div class="page-main-wrap">
<div class="page-main">
<div class="page-main-inner">
<div class="user-action-form-wrap">
<div class="user-action-form-inner">
<h1>Edit Channel</h1>
<form enctype="multipart/form-data" action="" method="post" class="post-form">
<div id="div_id_banner_logo" class="control-group">
<label for="id_banner_logo" class="control-label"> Banner logo </label>
<div class="controls">
Currently: <a href="#">*****</a>
<input type="checkbox" name="banner_logo-clear" id="banner_logo-clear_id" />
<label for="banner_logo-clear_id">Clear</label><br />
Change:
<input type="file" name="banner_logo" accept="image/*" class="clearablefileinput" id="id_banner_logo" />
</div>
</div>
<button class="primaryAction" type="submit">Update Channel</button>
</form>
</div>
</div>
</div>
<div class="page-sidebar-content-overlay"></div>
</div>
</div>
<div id="app-footer"></div>

View File

@@ -0,0 +1,137 @@
<div id="app-header"></div>
<div id="app-sidebar"></div>
<div class="page-main-wrap">
<div class="page-main">
<div class="page-main-inner">
<div class="user-action-form-wrap">
<div class="user-action-form-inner">
<h1>Edit Media</h1>
<form enctype="multipart/form-data" action="" method="post" class="post-form">
<div id="div_id_title" class="control-group">
<label for="id_title" class="control-label"> Title </label>
<div class="controls">
<input
type="text"
name="title"
value="Media title..."
maxlength="100"
class="textinput textInput"
id="id_title"
/>
<p id="hint_id_title" class="help-block">media title</p>
</div>
</div>
<div id="div_id_category" class="control-group">
<label for="id_category" class="control-label"> Category </label>
<div class="controls">
<select name="category" class="selectmultiple" id="id_category" multiple="">
<option value="1">Art</option>
<option value="2">Documentary</option>
<option value="3">Experimental</option>
<option value="4">Film</option>
<option value="5">Music</option>
<option value="6">TV</option>
</select>
<p id="hint_id_category" class="help-block">Media can be part of one or more categories</p>
</div>
</div>
<div id="div_id_new_tags" class="control-group">
<label for="id_new_tags" class="control-label"> Tags </label>
<div class="controls">
<input type="text" name="new_tags" class="textinput textInput" id="id_new_tags" />
<p id="hint_id_new_tags" class="help-block">a comma separated list of new tags.</p>
</div>
</div>
<div id="div_id_add_date" class="control-group">
<label for="id_add_date" class="control-label"> Date produced </label>
<div class="controls">
<input type="text" name="add_date" value="2021-01-01 00:00:01" class="datetimeinput" id="id_add_date" />
</div>
</div>
<div id="div_id_uploaded_poster" class="control-group">
<label for="id_uploaded_poster" class="control-label"> Upload image </label>
<div class="controls">
<input
type="file"
name="uploaded_poster"
accept="image/*"
class="clearablefileinput"
id="id_uploaded_poster"
/>
<p id="hint_id_uploaded_poster" class="help-block">This image will characterize the media</p>
</div>
</div>
<div id="div_id_description" class="control-group">
<label for="id_description" class="control-label"> Description </label>
<div class="controls">
<textarea name="description" cols="40" rows="10" class="textarea" id="id_description"></textarea>
</div>
</div>
<div id="div_id_state" class="control-group">
<label for="id_state" class="control-label requiredField">
State<span class="asteriskField">*</span>
</label>
<div class="controls">
<select name="state" class="select" id="id_state">
<option value="private">Private</option>
<option value="public" selected="">Public</option>
<option value="unlisted">Unlisted</option>
</select>
<p id="hint_id_state" class="help-block">state of Media</p>
</div>
</div>
<div id="div_id_enable_comments" class="control-group">
<div class="controls">
<label for="id_enable_comments" class="checkbox">
<input
type="checkbox"
name="enable_comments"
class="checkboxinput"
id="id_enable_comments"
checked=""
/>
Enable comments
</label>
<p id="hint_id_enable_comments" class="help-block">Whether comments will be allowed for this media</p>
</div>
</div>
<div id="div_id_thumbnail_time" class="control-group">
<label for="id_thumbnail_time" class="control-label"> Thumbnail time </label>
<div class="controls">
<input
type="number"
name="thumbnail_time"
value="132.5"
step="any"
class="numberinput"
id="id_thumbnail_time"
/>
<p id="hint_id_thumbnail_time" class="help-block">Time on video that a thumbnail will be taken</p>
</div>
</div>
<div id="div_id_allow_download" class="control-group">
<div class="controls">
<label for="id_allow_download" class="checkbox">
<input
type="checkbox"
name="allow_download"
class="checkboxinput"
id="id_allow_download"
checked=""
/>
Allow download
</label>
<p id="hint_id_allow_download" class="help-block">Whether option to download media is shown</p>
</div>
</div>
<button class="primaryAction" type="submit">Update Media</button>
</form>
</div>
</div>
</div>
<div class="page-sidebar-content-overlay"></div>
</div>
</div>
<div id="app-footer"></div>

View File

@@ -0,0 +1,43 @@
<div id="app-header"></div>
<div id="app-sidebar"></div>
<div class="page-main-wrap">
<div class="page-main">
<div class="page-main-inner">
<div class="user-action-form-wrap">
<div class="user-action-form-inner">
<h1>Edit Profile</h1>
<form enctype="multipart/form-data" action="" method="post" class="post-form">
<p>
<label for="id_name">Full name:</label>
<input type="text" name="name" value="" maxlength="250" required="" id="id_name" />
</p>
<p>
<label for="id_description">About me:</label>
<textarea name="description" cols="40" rows="10" id="id_description"></textarea>
</p>
<p>
<label for="id_email">Email address:</label>
<input type="email" name="email" value="" maxlength="254" id="id_email" />
</p>
<p>
<label for="id_logo">Logo:</label> Currently: <a href="#">*****</a>
<input type="checkbox" name="logo-clear" id="logo-clear_id" />
<label for="logo-clear_id">Clear</label><br />
Change:
<input type="file" name="logo" accept="image/*" id="id_logo" />
</p>
<p>
<label for="id_notification_on_comments"
>Whether you will receive email notifications for comments added to your content:</label
>
<input type="checkbox" name="notification_on_comments" id="id_notification_on_comments" checked="" />
</p>
<button class="primaryAction" type="submit">Update Profile</button>
</form>
</div>
</div>
</div>
<div class="page-sidebar-content-overlay"></div>
</div>
</div>
<div id="app-footer"></div>

View File

@@ -0,0 +1,11 @@
<div id="app-header"></div>
<div id="app-sidebar"></div>
<div class="page-main-wrap">
<div class="page-main">
<div class="page-main-inner">
<div class="error-page-wrap">Error</div>
</div>
<div class="page-sidebar-content-overlay"></div>
</div>
</div>
<div id="app-footer"></div>

View File

@@ -0,0 +1,45 @@
<div id="app-header"></div>
<div id="app-sidebar"></div>
<div class="page-main-wrap">
<div class="page-main">
<div class="page-main-inner">
<div class="user-action-form-wrap">
<div class="user-action-form-inner">
<h1>Sign Up</h1>
<p>Already have an account? Then please <a href="./signin.html">sign in</a>.</p>
<form class="signup" id="signup_form" method="post" action="#">
<input type="hidden" name="csrfmiddlewaretoken" value="" />
<p>
<label for="id_email">E-mail:</label>
<input type="email" name="email" id="id_email" required="" placeholder="E-mail address" />
</p>
<p>
<label for="id_username">Username:</label>
<input
type="text"
name="username"
id="id_username"
autofocus="autofocus"
placeholder="Username"
minlength="4"
maxlength="150"
required=""
/>
</p>
<p>
<label for="id_name">Name:</label>
<input type="text" name="name" id="id_name" maxlength="100" required="" />
</p>
<p>
<label for="id_password1">Password:</label>
<input type="password" name="password1" id="id_password1" required="" placeholder="Password" />
</p>
<button type="submit">Sign Up »</button>
</form>
</div>
</div>
</div>
<div class="page-sidebar-content-overlay"></div>
</div>
</div>
<div id="app-footer"></div>

View File

@@ -0,0 +1,28 @@
<div id="app-header"></div>
<div id="app-sidebar"></div>
<div class="page-main-wrap">
<div class="page-main">
<div class="page-main-inner">
<div class="user-action-form-wrap">
<div class="user-action-form-inner">
<h1>Password Reset</h1>
<p>
Forgotten your password? Enter your e-mail address below, and we'll send you an e-mail allowing you to reset
it.
</p>
<form method="POST" action="#" class="password_reset">
<input type="hidden" name="csrfmiddlewaretoken" value="" />
<p>
<label for="id_email">E-mail:</label>
<input type="email" name="email" size="30" id="id_email" required="" placeholder="E-mail address" />
</p>
<input type="submit" value="Reset My Password" />
</form>
<p>Please contact us if you have any trouble resetting your password.</p>
</div>
</div>
</div>
<div class="page-sidebar-content-overlay"></div>
</div>
</div>
<div id="app-footer"></div>

View File

@@ -0,0 +1,36 @@
<div id="app-header"></div>
<div id="app-sidebar"></div>
<div class="page-main-wrap">
<div class="page-main">
<div class="page-main-inner">
<div class="user-action-form-wrap">
<div class="user-action-form-inner">
<h1>Sign In</h1>
<p>If you have not created an account yet, then please <a href="./register.html">sign up</a> first.</p>
<form class="login" method="POST" action="#">
<input type="hidden" name="csrfmiddlewaretoken" value="" />
<p>
<label for="id_login">Login:</label>
<input
type="text"
name="login"
id="id_login"
required=""
autofocus="autofocus"
placeholder="Username or e-mail"
/>
</p>
<p>
<label for="id_password">Password:</label>
<input type="password" name="password" id="id_password" required="" placeholder="Password" />
</p>
<a class="button secondaryAction" href="./reset-password.html">Forgot Password?</a>
<button class="primaryAction" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
<div class="page-sidebar-content-overlay"></div>
</div>
</div>
<div id="app-footer"></div>

View File

@@ -0,0 +1,20 @@
<div id="app-header"></div>
<div id="app-sidebar"></div>
<div class="page-main-wrap">
<div class="page-main">
<div class="page-main-inner">
<div class="user-action-form-wrap">
<div class="user-action-form-inner">
<h1>Sign Out</h1>
<p>Are you sure you want to sign out?</p>
<form method="post" action="#">
<input type="hidden" name="csrfmiddlewaretoken" value="" />
<button type="submit">Sign Out</button>
</form>
</div>
</div>
</div>
<div class="page-sidebar-content-overlay"></div>
</div>
</div>
<div id="app-footer"></div>

View File

@@ -0,0 +1,15 @@
<div id="app-header"></div>
<div id="app-sidebar"></div>
<div class="page-main-wrap">
<div class="page-main">
<div class="page-main-inner">
<div class="custom-page-wrapper">
<h2>Terms</h2>
<hr />
<p>Terms of service</p>
</div>
</div>
<div class="page-sidebar-content-overlay"></div>
</div>
</div>
<div id="app-footer"></div>