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

Cleanup and minor tweaks for apps with a sidebar

Browse Source 
Like Attract or Flamenco
This commit is contained in:
Pablo Vazquez 2018-09-06 18:18:15 +02:00
parent 4532c1ea39
commit 9bcd6cec89
9 changed files with 20 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/scripts/tutti/0_navbar.js
View File

@ -32,7 +32,7 @@ var DocumentTitleAPI = {
};
/* Status Bar */
/* Status Bar * DEPRECATED * USE TOASTR INSTEAD */
function statusBarClear(delay_class, delay_html){
var statusBar = $("#status-bar");
@ -54,6 +54,7 @@ function statusBarClear(delay_class, delay_html){
}
}
/* Status Bar * DEPRECATED - USE TOASTR INSTEAD * */
function statusBarSet(classes, html, icon_name, time){
/* Utility to notify the user by temporarily flashing text on the project header
Usage:

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

@ -66,7 +66,9 @@ function containerResizeY(window_height){
var project_container = document.getElementById('project-container');
var container_offset = project_container.offsetTop;
var nav_header_height = $('#project_nav-header').height();
// 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

23
src/styles/_apps_base.sass
View File

@ -143,12 +143,17 @@ nav.sidebar
left: 0
width: $sidebar-width
height: 100%
background-color: $color-background-nav
display: flex
flex-direction: column
> ul > li > .navbar-item
padding-top: 10px
padding-bottom: 10px
background: red
.dropdown
min-width: $sidebar-width
.dropdown-menu
top: initial
bottom: 3px
@ -159,7 +164,7 @@ nav.sidebar
li a
justify-content: flex-start
ul
> ul
width: 100%
margin: 0
padding: 0
@ -172,25 +177,11 @@ nav.sidebar
a.navbar-item, button
display: flex
color: $color-text-light-hint
font-size: 1.5em
align-items: center
justify-content: center
padding: 10px 0
background: transparent
border: none
width: 100%
text-decoration: none
&:hover
color: $color-text-light-primary
&:active
outline: none
&.cloud
i
position: relative
left: -4px
a.dropdown-toggle
padding: 0

5
src/styles/_config.sass
View File

@ -96,13 +96,12 @@ $screen-xs-max: $screen-sm-min - 1 !default
$screen-sm-max: $screen-md-min - 1 !default
$screen-md-max: $screen-lg-min - 1 !default
$sidebar-width: 50px !default
$sidebar-width: 40px !default
/* Project specifics */
$project_nav-width: 250px !default
$project-sidebar-width: 40px !default
$project_header-height: 37px !default
$project_footer-height: 30px !default
$project_header-height: 40px !default
$node-type-asset_image: #e87d86 !default
$node-type-asset_file: #CC91C7 !default

95
src/styles/_project.sass
View File

@ -22,6 +22,7 @@ body.blog
#project-container
display: flex
flex-direction: row
margin-top: $project_header-height
min-height: 300px
position: relative
z-index: $z-index-base
@ -36,9 +37,6 @@ body.blog
+media-xs
flex-direction: column-reverse
#project-side-container+#project_context-header
width: 100%
left: 0
#project_nav-container
+media-lg
@ -112,13 +110,6 @@ body.blog
height: $project-sidebar-width
width: $project-sidebar-width
#project-loading
align-items: center
display: flex
height: $project-sidebar-width
justify-content: center
width: $project-sidebar-width
#search-container #project_sidebar ul.project-tabs li.tabs-thumbnail
background-color: $color-background-nav-dark
@ -150,78 +141,13 @@ body.blog
/* Header with name and node edit tools */
#project_nav-header,
#project_context-header
align-items: center
color: white
display: flex
position: relative
#project_context-header
align-items: center
color: $color-text-dark-secondary
display: flex
height: $project_header-height
min-height: $project_header-height
position: fixed
top: $project_header-height + 1
transition: box-shadow 250ms ease-in-out
z-index: $z-index-base + 3
&.is-offset
box-shadow: 0 0 25px rgba(black, .2)
span#status-bar
text-align: left
#project_nav-header
left: 0
position: absolute
top: 0
width: 100%
z-index: $z-index-base + 3
/* Name of the project */
.project-title
+text-overflow-ellipsis
height: 100%
max-width: 100%
width: 100%
span#status-bar
position: absolute
left: 0
top: 10px
min-width: 33%
padding: 5px 15px
color: $color-text-dark
opacity: 0
z-index: 1
font-weight: 400
white-space: nowrap
transition: all 250ms ease-in-out
+media-xs
left: 0
min-width: 100%
i
margin-right: 5px
&.info
color: $color-info
&.error
color: $danger
&.warning
color: $color-warning
&.success
color: $color-success
&.default
color: $color-text-light
&.active
opacity: 1
span#project-edit-title
position: absolute
padding: 15px 20px
@ -238,17 +164,6 @@ span#project-edit-title
display: none
ul.project-edit-tools
align-items: center
display: flex
list-style-type: none
margin: 0 0 0 auto
padding: 0
+media-xs
width: 100%
margin: 0 auto
justify-content: space-around
li
a, button
padding: $dropdown-item-padding-y ($dropdown-item-padding-x / 2)
@ -353,13 +268,9 @@ ul.project-edit-tools
background-color: rgba($color-background-nav-dark, .7)
opacity: 1
i
+spin
animation-duration: .5s
#project-header+#project_tree,
#project-header+#project_context-container
margin-top: $project_header-height
#project-container
ul.project_nav-edit-list

4
src/styles/_utils.sass
View File

@ -642,9 +642,7 @@
#{$property}: $color-status-review
=sidebar-button-active
background-color: $color-background-nav
box-shadow: inset 2px 0 0 $color-primary
color: white
color: $primary
.flash-on
background-color: lighten($color-success, 50%) !important

1
src/styles/components/_jumbotron.sass
View File

@ -2,6 +2,7 @@
.jumbotron
background-size: cover
border-radius: 0
margin-bottom: 0
padding-top: 10em
padding-bottom: 10em

2
src/templates/nodes/edit_embed.pug
View File

@ -71,7 +71,7 @@
hr
ul.project-edit-tools.justify-content-end.h-auto
ul.project-edit-tools.disabled.d-flex.list-unstyled.p-2.mb-0.h-auto.justify-content-end
li.button-cancel
a#item_cancel.item-cancel.project-mode-edit.btn.btn-outline-secondary(
href="javascript:void(0);",

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

@ -51,11 +51,6 @@
#project_nav
#project_nav-container
#project_nav-header.bg-white
a.project-title.p-2.font-weight-bold.text-dark(
href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
| {{ project.name }}
// TODO - make list a macro
#project_tree.edit.bg-white
ul.project_nav-edit-list
@ -80,7 +75,6 @@
#project_context-container
#project_context-header.bg-white
span#status-bar
| {% block project_context_header %}
| {% endblock %}