archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Project Edit: Cleanup and styling

Browse Source
This commit is contained in:
Pablo Vazquez 2018-09-07 17:21:02 +02:00
parent 8a90cd00e9
commit 6b3f025e16
11 changed files with 196 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/scripts/tutti/1_project-navigation.js
View File

@ -66,15 +66,11 @@ function containerResizeY(window_height){
var project_container = document.getElementById('project-container');
var container_offset = project_container.offsetTop;
// TODO (pablo) - see if it's used at all
// var nav_header_height = $('#project_context-header').height();
var nav_header_height = 40;
var container_height = window_height - container_offset.top;
var container_height_wheader = window_height - container_offset.top - nav_header_height;
var window_height_minus_nav = window_height - nav_header_height - 1; // 1 is border width
$('#project_context-header').width($('#project_context-container').width());
if ($(window).width() > 768) {
$('#project-container').css(
{'max-height': window_height_minus_nav + 'px',

21
src/styles/_project-sharing.sass
View File

@ -93,15 +93,6 @@ ul.sharing-users-list
color: lighten($color-danger, 10%)
.sharing-users-info
padding-left: 15px
border-left: thin solid $color-text-dark-hint
p
font:
size: 1.1em
weight: 300
.sharing-users-search
.disabled
color: $color-text-dark-secondary
@ -158,24 +149,26 @@ ul.list-generic
list-style: none
> li
padding: 5px 0
display: flex
align-items: center
border-top: thin solid $color-background
display: flex
padding: 5px 0
&:first-child
border-top: none
&:hover .item a
color: $color-primary
color: $primary
a
flex: 1
&.active
color: $primary !important
font-weight: bold
.actions
margin-left: auto
.btn
font-size: .7em
span
color: $color-text-dark-secondary

65
src/styles/_project.sass
View File

@ -143,18 +143,12 @@ body.blog
#project_context-header
transition: box-shadow 250ms ease-in-out
z-index: $z-index-base + 3
left: 0
width: 100%
&.is-offset
box-shadow: 0 0 25px rgba(black, .2)
span#project-edit-title
position: absolute
padding: 15px 20px
font:
size: 1.1em
weight: 400
white-space: nowrap
/* Edit Asset buttons */
.project-mode-view,
@ -241,56 +235,6 @@ ul.project-edit-tools
/* // Extra asset tools in dropdown */
/* // Edit Asset buttons */
ul.project_nav-edit-list
list-style: none
padding: 0
margin: $project_header-height 0 0 0
li
background-color: $color-background
border-bottom: 1px solid $color-background-dark
color: $color-text-dark
position: relative
&:hover
cursor: pointer
background-color: $color-background-light
a
padding: 10px 15px
display: inline-block
width: 100%
text-decoration: none
color: $color-text-dark
i
padding-right: 15px
&.active
background-color: white
a
color: $color-primary-dark
.project_nav-toggle-btn
position: absolute
bottom: 0
width: 100%
padding: 10px
text-align: center
color: $color-text-light-hint
cursor: pointer
&:hover
color: $color-text-light
i
font-size: 1.3em
+media-xs
visibility: hidden
display: none
#project_context
position: relative
display: flex
@ -299,6 +243,8 @@ ul.project_nav-edit-list
height: 100%
background-color: white
// Add padding to project_context because project_context-header is fixed on top.
// It contains the New, Edit, Save Changes, etc. buttons.
#project_context-header+#project_context
padding-top: $project_header-height
@ -1678,9 +1624,6 @@ section.node-children
padding: 20px
.form-group
position: relative
margin: 0 auto 30px auto
&.tags .select2-container
.select2-selection
+input-generic

3
src/styles/blog.sass
View File

@ -99,9 +99,6 @@
padding: 20px
.form-group
position: relative
margin: 0 auto 30px auto
input, textarea, select
+input-generic

37
src/styles/components/_navbar.sass
View File

@ -127,19 +127,50 @@ nav.sidebar
font-size: .9em
// Secondary navigation for
// Secondary navigation
$nav-secondary-bar-size: -2px
.nav-secondary
align-items: center
box-shadow: inset 0 -2px 0 0 $color-background
box-shadow: inset 0 $nav-secondary-bar-size 0 0 $color-background
.nav-link
color: $color-text
cursor: pointer
transition: box-shadow 150ms ease-in-out
box-shadow: inset 0 $nav-secondary-bar-size 0 0 $color-background
// Blue bar on the bottom.
&:hover,
&.active
box-shadow: inset 0 $nav-secondary-bar-size 0 0 $primary
i
color: $primary
&.nav-secondary-vertical
align-items: flex-start
flex-direction: column
box-shadow: none // Last item on the list already has a box-shadow.
> li
width: 100% // span across the whole width.
// Blue bar on the side.
.nav-link
box-shadow: inset 0 -1px 0 0 $color-background, inset -1px 0 0 0 $color-background
&:hover,
&.active
box-shadow: inset 0 -2px 0 0 $primary
box-shadow: inset 0 -1px 0 0 $color-background, inset ($nav-secondary-bar-size * 1.5) 0 0 0 $primary
// Strange 1px offset when nav-secondary is in the topbar.
// To fix .nav-link and .nav-item must be height: 100%, but this
// makes it misalign vertically since nav.navbar has align-items: center.
// Let's just add this exception for now.
nav.navbar
> .nav-secondary
position: relative
top: 1px
.navbar-overlay

5
src/templates/nodes/custom/asset/video/view_embed.pug
View File

@ -79,6 +79,8 @@ script(type="text/javascript").
}
});
this.rememberVolumePlugin();
// Generic utility to add-buttons to the player.
function addVideoPlayerButton(data) {
@ -120,11 +122,10 @@ script(type="text/javascript").
videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton);
};
this.rememberVolumePlugin();
{% if current_user.is_authenticated %}
let fetch_progress_url = '{{ url_for("users_api.get_video_progress", video_id=node._id) }}';
let report_url = '{{ url_for("users_api.set_video_progress", video_id=node._id) }}';
this.progressPlugin({
'report_url': report_url,
'fetch_progress_url': fetch_progress_url,

24
src/templates/projects/edit.pug
View File

@ -1,13 +1,13 @@
| {% extends 'projects/edit_layout.html' %}
| {% set title = 'edit' %}
| {% block page_title %}Edit {{ project.name }}{% endblock %}
| {% set title = 'edit' %}
| {% block project_context_header %}
span#project-edit-title
| Edit Project
#project_context-header.d-flex.justify-content-end.position-fixed.bg-white
ul.d-flex.list-unstyled.p-2.mb-0.h-auto.justify-content-end(
class="project-edit-tools disabled")
ul.project-edit-tools
// Edit Mode
li.button-cancel
a#item_cancel.project-mode-edit.btn.btn-sm.btn-link(
href="{{url_for('projects.view', project_url=project.url, _external=True)}}",
@ -16,7 +16,9 @@ ul.project-edit-tools
| Go to Project
li.button-save
a#item_save.project-mode-edit.btn.btn-sm.btn-outline-success.mx-2(
a.btn.btn-sm.btn-outline-success.ml-2.px-3.text-capitalize(
id="item_save",
class="project-mode-edit",
href="#",
title="Save changes")
i.button-save-icon.pi-check
@ -24,6 +26,9 @@ ul.project-edit-tools
| {% endblock %}
| {% block project_context %}
.row
.col-md-12
h5.pt-3.pl-3 Project Overview
#node-edit-container
form(
id="node-edit-form"
@ -81,7 +86,8 @@ ul.project-edit-tools
hr
ul.project-edit-tools.justify-content-end.h-auto
ul.d-flex.list-unstyled.p-2.mb-0.h-auto.justify-content-end(
class="project-edit-tools disabled")
li.button-cancel
a#item_cancel.project-mode-edit.btn.btn-link(
href="{{url_for('projects.view', project_url=project.url, _external=True)}}",
@ -90,7 +96,9 @@ ul.project-edit-tools
| Go to Project
li.button-save
a#item_save.project-mode-edit.btn.btn-outline-success.ml-2(
a.btn.btn-sm.btn-outline-success.ml-2.px-3.text-capitalize(
id="item_save",
class="project-mode-edit",
href="#",
title="Save changes")
i.button-save-icon.pi-check

66
src/templates/projects/edit_layout.pug
View File

@ -1,28 +1,28 @@
| {% extends 'layout.html' %}
include ../mixins/components
| {% block page_title %}Edit {{ project.name }}{% endblock %}
| {% block navigation_tabs %}
+nav-secondary()
+nav-secondary-link(
class="px-0 font-weight-bold",
href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
| {{ project.name }}
| {% endblock navigation_tabs %}
| {% block body %}
#project-container
#project-side-container
#project_sidebar
ul.project-tabs.p-0
li.tabs-thumbnail(
title="About",
data-toggle="tooltip",
data-placement="left",
class="{% if title == 'about' %}active {% endif %}{% if project.picture_square %}image{% endif %}")
a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
| {% if project.picture_square %}
img(src="{{ project.picture_square.thumbnail('b', api=api) }}")
| {% else %}
i.pi-home
| {% endif %}
li.tabs-browse(
title="Browse",
data-toggle="tooltip",
data-placement="left")
a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
i.pi-folder
| {% if not project.is_private %}
li.tabs-search(
title="Search",
@ -41,38 +41,40 @@
i.pi-cog
| {% endif %}
.project_nav-toggle-btn(
title="Expand Navigation [T]",
data-toggle="tooltip",
data-placement="right")
i.pi-angle-double-left
#project_nav
#project_nav-container
// TODO - make list a macro
#project_tree.edit.bg-white
ul.project_nav-edit-list
li(class="{% if title == 'edit' %}active{% endif %}")
a(href="{{ url_for('projects.edit', project_url=project.url) }}")
i.pi-list
+nav-secondary()(class="nav-secondary-vertical")
+nav-secondary-link(
class="{% if title == 'edit' %}active{% endif %}",
href="{{ url_for('projects.edit', project_url=project.url) }}")
i.pr-3.pi-list
| Overview
li(class="{% if title == 'sharing' %}active{% endif %}")
a(href="{{ url_for('projects.sharing', project_url=project.url) }}")
i.pi-share
+nav-secondary-link(
class="{% if title == 'sharing' %}active{% endif %}",
href="{{ url_for('projects.sharing', project_url=project.url) }}")
i.pr-3.pi-share
| Sharing
li(class="{% if title == 'edit_node_types' %}active{% endif %}")
a(href="{{ url_for('projects.edit_node_types', project_url=project.url) }}")
i.pi-puzzle
+nav-secondary-link(
class="{% if title == 'edit_node_types' %}active{% endif %}",
href="{{ url_for('projects.edit_node_types', project_url=project.url) }}")
i.pr-3.pi-puzzle
| Node Types
| {% for ext in ext_pages %}
li(class="{% if title == ext.name %}active{% endif %}")
a(href="{{ url_for('projects.edit_extension', project_url=project.url, extension_name=ext.name) }}")
i(class="pi-{{ext.icon}}")
| {{ext.name | title}}
+nav-secondary-link(
class="{% if title == ext.name %}active{% endif %}",
href="{{ url_for('projects.edit_extension', project_url=project.url, extension_name=ext.name) }}")
i(class="pr-3 pi-{{ ext.icon }}")
| {{ ext.name | title }}
| {% endfor %}
#project_context-container
#project_context-header.bg-white
#project_context-container.border-left
| {% block project_context_header %}
| {% endblock %}

13
src/templates/projects/edit_node_type_embed.pug
View File

@ -17,13 +17,16 @@ form(
.row
.col-md-9
h3 Editing: {{ node_type['name'] }}
h5.text-info {{ node_type['name'] | undertitle }}
.col-md-3
button.js-form-save.btn.btn-outline-success.pull-right(style="margin-top: 15px;")
button.btn.btn-sm.btn-outline-success.float-right.px-3(
class="js-form-save")
i.pr-2.pi-check
| Save Changes
.row
.col-md-12
.col-md-12.pt-2
| {% for field in form %}
| {% if field.name == 'csrf_token' %}
| {{ field }}
@ -46,7 +49,9 @@ form(
| {% endif %}
| {% endfor %}
button.js-form-save.btn.btn-outline-success.pull-right
button.btn.btn-sm.btn-outline-success.float-right.px-3(
class="js-form-save")
i.pr-2.pi-check
| Save Changes

30
src/templates/projects/edit_node_types.pug
View File

@ -2,29 +2,30 @@
| {% set title = 'edit_node_types' %}
| {% block page_title %}Node Types: {{ project.name }}{% endblock %}
| {% block project_context_header %}
span#project-edit-title
| Edit Project Node Types
| {% endblock %}
| {% block project_context %}
#node-edit-container
div(id="node-edit-form")
#node-edit-form
.row
.col-md-9
p.
.col-md-12
h5 Everything is a Node
p.mb-1.
Nodes are all the items that can be found in a project.
Everything is a node: a file, a folder, a comment. They are
defined with custom properties to be properly displayed.
A file, a folder, a comment, everything is a node.
#[br]
They are defined with custom properties to be properly displayed.
hr
.row
.col-md-4.col-sm-6
h3 Node Types
h5 Node Types
| {% if current_user.has_cap('edit-project-node-types') %}
ul.list-generic
| {% for node_type in project.node_types %}
li
a.js-item-open(
a.js-item-open.text-muted(
href="{{ url_for('projects.edit_node_type', project_url=project.url, node_type_name=node_type.name) }}",
data-url="{{ url_for('projects.edit_node_type', project_url=project.url, node_type_name=node_type.name) }}")
| {{ node_type.name | undertitle }}
@ -33,7 +34,7 @@ span#project-edit-title
| {% endfor %}
| {% endif %}
.col-md-8.col-sm-6
.col-md-8.col-sm-6.border-left
#node-edit-embed
| {% endblock %}
@ -45,6 +46,9 @@ script.
$('.js-item-open').on('click', function(e){
e.preventDefault();
$('.js-item-open').removeClass('active');
$(this).addClass('active');
var item_url = $(this).data('url');
$.get(item_url, function(item_data) {

42
src/templates/projects/sharing.pug
View File

@ -2,28 +2,17 @@
| {% set title = 'sharing' %}
| {% block page_title %}Sharing: {{ project.name }}{% endblock %}
| {% block project_context_header %}
span#project-edit-title
| Manage team members for this project
| {% endblock %}
| {% block project_context %}
#node-edit-container
#node-edit-form
.row
.col-md-12
h5.mb-1 Team Management
hr
.row
.col-md-6
| {% if (project.user == current_user.objectid or current_user.has_cap('admin')) %}
.sharing-users-search
.form-group
input#user-select.form-control(
name='contacts',
type='text',
placeholder='Add team members by name')
| {% else %}
.sharing-users-search
.disabled Only project owners & admins can manage users
| {% endif %}
ul.sharing-users-list
| {% for user in users %}
li.sharing-users-item(
@ -60,9 +49,20 @@ span#project-edit-title
| {% endfor %}
.col-md-6
.sharing-users-info
h4 What can team members do?
p.
| {% if (project.user == current_user.objectid or current_user.has_cap('admin')) %}
.sharing-users-search
input#user-select.form-control(
name='contacts',
type='text',
placeholder='Add team members by name')
| {% else %}
.sharing-users-search
.disabled Only project owners & admins can manage users
| {% endif %}
.border-left.pl-3.mt-4
h6 What can team members do?
p
Team members are able to upload new content to the project,
as well as view, edit, delete, and comment on the content
previously created.