Cleanup and replace custom styles with bootstrap classes.

This commit is contained in:
Pablo Vazquez 2018-09-17 17:08:46 +02:00
parent e40ba69872
commit 57f5836829
6 changed files with 45 additions and 50 deletions

View File

@ -36,7 +36,7 @@ li.dropdown
| {% else %} | {% else %}
li.pt-1.pr-1 li.pr-1
a.btn.btn-sm.btn-outline-primary.px-3( a.btn.btn-sm.btn-outline-primary.px-3(
href="{{ url_for('users.login') }}") href="{{ url_for('users.login') }}")
| Log In | Log In

View File

@ -15,7 +15,7 @@
span.texture-info-files {{ children|length }} item{% if children|length != 1 %}s{% endif %} span.texture-info-files {{ children|length }} item{% if children|length != 1 %}s{% endif %}
| {% endif %} | {% endif %}
section.node-children.group.texture section.node-children.group.texture.px-3
| {% for child in children %} | {% for child in children %}
a.list-node-children-container( a.list-node-children-container(
@ -49,7 +49,7 @@
| {% if child.permissions.world %} | {% if child.permissions.world %}
.list-node-children-item-ribbon .list-node-children-item-ribbon
span free span FREE
| {% endif %} | {% endif %}
| {% if child.node_type == 'texture' %} | {% if child.node_type == 'texture' %}

View File

@ -1,9 +1,8 @@
| {% block body %} | {% block body %}
#node-container.texture #node-container.texture
#node-overlay section.px-4
h4.pt-4.mb-3(class="js-texture-title")
.texture-title#node-title
| {{node.name}} | {{node.name}}
| {% if node.properties.license_type %} | {% if node.properties.license_type %}
@ -24,15 +23,6 @@
| {% endif %} | {% endif %}
| {% endif %} | {% endif %}
| {% if node.permissions.world %}
.texture-license.public(
data-toggle="tooltip",
data-placement="bottom",
title="Anybody can download. Share it!")
i.pi-lock-open
span Public
| {% endif %}
ul.node-row.texture-info ul.node-row.texture-info
| {% if node.properties.files %} | {% if node.properties.files %}
li li
@ -44,9 +34,20 @@
i.pi-puzzle i.pi-puzzle
| {% if not node.properties.is_tileable %}Not {% endif %}Seamless | {% if not node.properties.is_tileable %}Not {% endif %}Seamless
li.ml-auto
| {% if node.permissions.world %}
li.text-success(
data-toggle="tooltip",
data-placement="left",
title="Anybody can download. Share it!")
i.pi-lock-open
span Public
| {% endif %}
| {# Display publishing status only to editors #} | {# Display publishing status only to editors #}
| {% if node.has_method('PUT') %} | {% if node.has_method('PUT') %}
li.status( li(
class="{{ node.properties.status }}", class="{{ node.properties.status }}",
title="Status") title="Status")
| Status: #[strong {{ node.properties.status | undertitle }}] | Status: #[strong {{ node.properties.status | undertitle }}]
@ -68,37 +69,32 @@
section.node-details-container.texture section.node-details-container.texture
.node-details-header .px-3.d-flex.flex-column.h-100
.node-title {{map_type}} h5 {{ map_type }}
.node-details-attributes .d-flex.flex-column.text-black-50.h-100
span.sizes span
span.x | #[strong(title='Width') {{ f.file.width }}] x #[strong(title='Height') {{ f.file.height }}]
| Width:
strong {{ f.file.width }} span.mt-auto {{ f.file.length | filesizeformat }}
span.y span.text-uppercase.pt-1
| Height:
strong {{ f.file.height }}
span.length
| {{ f.file.length | filesizeformat }}
span.content_type
| {{ f.file.content_type }} | {{ f.file.content_type }}
.node-details-meta ul.list-unstyled.mt-auto.pt-2
ul.node-details-meta-list
li.node-details-meta-list-item.texture.download li.node-details-meta-list-item.texture.download
| {% if f.file.link %} | {% if f.file.link %}
a(href="{{ f.file.link }}",, a(href="{{ f.file.link }}",
title="Download texture", title="Download texture",
download="{{ f.file.filename }}") download="{{ f.file.filename }}")
button.btn.btn-outline-secondary(type="button") button.btn.btn-sm.btn-outline-primary.px-3.btn-block(type="button")
i.pi-download i.pi-download
| Download | Download
| {% else %} | {% else %}
button.btn.btn-outline-secondary.disabled.sorry(type="button") button.btn.btn-sm.btn-outline-primary.px-3.btn-block.disabled(type="button")
i.pi-lock i.pi-lock
| Download | Download
| {% endif %} | {% endif %}
| {% else %} | {% else %}
section.node-row section.node-row
section.node-details-container.texture section.node-details-container.texture
@ -116,9 +112,9 @@ script.
// Generate GA pageview // Generate GA pageview
ga('send', 'pageview', location.pathname); ga('send', 'pageview', location.pathname);
var str = $('.texture-title').text(); var str = $('.js-texture-title').text();
var to_replace = /_color|_bump|_specular|_normal|_translucency|_emission|_alpha|_tileable|.jpg|.png/g; var to_replace = /_color|_bump|_specular|_normal|_translucency|_emission|_alpha|_tileable|.jpg|.png/g;
$('.texture-title').text(str.replace(to_replace,'').replace(/_/g,' ')); $('.js-texture-title').text(str.replace(to_replace,'').replace(/_/g,' '));
$('.node-preview-thumbnail').each(function(i){ $('.node-preview-thumbnail').each(function(i){
$(this).closest('.node-preview').css({'height' : $(this).width() / $(this).data('aspect_ratio')}); $(this).closest('.node-preview').css({'height' : $(this).width() / $(this).data('aspect_ratio')});
@ -177,12 +173,6 @@ script.
}); });
$('.sorry').click(function() {
$.get('/403', function(data) {
$('#node-overlay').html(data).show().addClass('active');
})
});
$('#node-overlay').click(function(){ $('#node-overlay').click(function(){
$(this).removeClass('active').hide().html(); $(this).removeClass('active').hide().html();
}); });

View File

@ -3,8 +3,11 @@
| {% block node_preview %} | {% block node_preview %}
| {% if node.picture %} | {% if node.picture %}
| {% if current_user.has_cap('subscriber') or node.permissions.world %} | {% if current_user.has_cap('subscriber') or node.permissions.world %}
section.node-preview.image.js-node-preview-image section.node-preview.d-flex.justify-content-center(
img.node-preview-thumbnail(src="{{ node.picture.thumbnail('l', api=api) }}") class="js-node-preview-image")
img.node-preview-thumbnail(
src="{{ node.picture.thumbnail('l', api=api) }}",
alt="{{ node.name }}")
| {% else %} | {% else %}
| {% include 'nodes/custom/_node_preview_forbidden.html' %} | {% include 'nodes/custom/_node_preview_forbidden.html' %}
| {% endif %} | {% endif %}
@ -120,7 +123,8 @@ section.node-details-meta.pl-4.pr-2.py-2.border-bottom
i.pi-spin i.pi-spin
| {% endblock node_comments %} | {% endblock node_comments %}
| {% if node.properties.tags %} | {# Check if tags is defined and there is _actually_ a tag at least #}
| {% if node.properties.tags and node.properties.tags[0] %}
.col-md-4.d-none.d-lg-block .col-md-4.d-none.d-lg-block
script(src="{{ url_for('static_cloud', filename='assets/js/tagged_assets.min.js') }}") script(src="{{ url_for('static_cloud', filename='assets/js/tagged_assets.min.js') }}")
script. script.

View File

@ -1,4 +1,6 @@
| {% extends 'projects/home_layout.html' %} | {% extends 'projects/home_layout.html' %}
| {% set title = 'images' %}
| {% set subtab = 'images' %} | {% set subtab = 'images' %}
| {% set learn_more_btn_url = '/blog/introducing-image-sharing' %} | {% set learn_more_btn_url = '/blog/introducing-image-sharing' %}
| {% block currenttab %} | {% block currenttab %}

View File

@ -2,7 +2,7 @@
include ../mixins/components include ../mixins/components
| {% block body %} | {% block body %}
section.node-preview.project section.node-preview
| {% if header_video_file %} | {% if header_video_file %}
.embed-responsive.embed-responsive-16by9 .embed-responsive.embed-responsive-16by9
video#videoplayer.video-js.vjs-fluid.embed-responsive-item( video#videoplayer.video-js.vjs-fluid.embed-responsive-item(
@ -19,8 +19,7 @@ section.node-preview.project
To view this video please enable JavaScript, and consider upgrading to a web browser that To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
| {% elif project.picture_header %} | {% elif project.picture_header %}
a(href="{{ url_for( 'projects.view', project_url=project.url) }}") img.node-preview-thumbnail(src="{{ project.picture_header.thumbnail('l', api=api) }}")
img.header(src="{{ project.picture_header.thumbnail('l', api=api) }}")
| {% endif %} | {% endif %}
section.px-4 section.px-4