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 -2px 0 0 $primary
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 -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,

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

@ -1,29 +1,34 @@
| {% 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)}}",
title="Cancel changes")
i.button-cancel-icon.pi-angle-left
| Go to Project
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)}}",
title="Cancel changes")
i.button-cancel-icon.pi-angle-left
| Go to Project
li.button-save
a#item_save.project-mode-edit.btn.btn-sm.btn-outline-success.mx-2(
href="#",
title="Save changes")
i.button-save-icon.pi-check
| Save Changes
li.button-save
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
| Save Changes
| {% 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

76
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,40 +41,42 @@
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
| Overview
li(class="{% if title == 'sharing' %}active{% endif %}")
a(href="{{ url_for('projects.sharing', project_url=project.url) }}")
i.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
| Node Types
+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
+nav-secondary-link(
class="{% if title == 'sharing' %}active{% endif %}",
href="{{ url_for('projects.sharing', project_url=project.url) }}")
i.pr-3.pi-share
| Sharing
+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
| {% block project_context_header %}
| {% endblock %}
#project_context-container.border-left
| {% block project_context_header %}
| {% endblock %}
#project_context
| {% block project_context %}

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) {

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

@ -2,70 +2,70 @@
| {% 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
.col-md-6
| {% if (project.user == current_user.objectid or current_user.has_cap('admin')) %}
.sharing-users-search
.form-group
.row
.col-md-12
h5.mb-1 Team Management
hr
.row
.col-md-6
ul.sharing-users-list
| {% for user in users %}
li.sharing-users-item(
user-id="{{ user['_id'] }}",
class="{% if current_user.objectid == user['_id'] %}self{% endif %}")
.sharing-users-avatar
img(src="{{ user['avatar'] }}")
.sharing-users-details
span.sharing-users-name
| {{user['full_name']}}
| {% if project.user == user['_id'] and current_user.objectid == user['_id'] %}
small (You, owner)
| {% elif project.user == user['_id'] %}
small (Owner)
| {% elif current_user.objectid == user['_id'] %}
small (You)
| {% endif %}
span.sharing-users-extra {{user['username']}}
.sharing-users-action
| {# Only allow deletion if we are: admin, project owners, or current_user in the team #}
| {% if current_user.has_cap('admin') or (project.user == current_user.objectid) or (current_user.objectid == user['_id']) %}
| {% if project.user == user['_id'] %}
span
i.pi-happy(title="Hi boss!")
| {% elif current_user.objectid == user['_id'] %}
button.user-remove(title="Leave this project") Leave
| {% else %}
button.user-remove(title="Remove this user from your project")
i.pi-trash
| {% endif %}
| {% endif %}
| {% endfor %}
.col-md-6
| {% 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 %}
| {% 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(
user-id="{{ user['_id'] }}",
class="{% if current_user.objectid == user['_id'] %}self{% endif %}")
.sharing-users-avatar
img(src="{{ user['avatar'] }}")
.sharing-users-details
span.sharing-users-name
| {{user['full_name']}}
| {% if project.user == user['_id'] and current_user.objectid == user['_id'] %}
small (You, owner)
| {% elif project.user == user['_id'] %}
small (Owner)
| {% elif current_user.objectid == user['_id'] %}
small (You)
| {% endif %}
span.sharing-users-extra {{user['username']}}
.sharing-users-action
| {# Only allow deletion if we are: admin, project owners, or current_user in the team #}
| {% if current_user.has_cap('admin') or (project.user == current_user.objectid) or (current_user.objectid == user['_id']) %}
| {% if project.user == user['_id'] %}
span
i.pi-happy(title="Hi boss!")
| {% elif current_user.objectid == user['_id'] %}
button.user-remove(title="Leave this project") Leave
| {% else %}
button.user-remove(title="Remove this user from your project")
i.pi-trash
| {% endif %}
| {% endif %}
| {% endfor %}
.col-md-6
.sharing-users-info
h4 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.
.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.
| {% endblock %}