Skip to content

Commit

Permalink
Ajoute la modification "in place" du titre et du sous-titre d'un contenu
Browse files Browse the repository at this point in the history
  • Loading branch information
Arnaud-D committed Oct 1, 2020
1 parent b6f9fd1 commit 773f018
Show file tree
Hide file tree
Showing 20 changed files with 703 additions and 127 deletions.
27 changes: 27 additions & 0 deletions assets/js/inplace-fields.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/* ===== Zeste de Savoir ==================================================== */
/* Show and hide in-place forms */
/* ========================================================================== */

(function($) {
'use strict'

/* Edit title */
function toggleDisplayTitle(e) {
$('#title-show').toggleClass('hidden')
$('#title-edit').toggleClass('hidden')
e.preventDefault()
}

$('#show-title-edit').on('click', toggleDisplayTitle)
$('#hide-title-edit').on('click', toggleDisplayTitle)

/* Edit subtitle */
function toggleDisplaySubtitle(e) {
$('#subtitle-show').toggleClass('hidden')
$('#subtitle-edit').toggleClass('hidden')
e.preventDefault()
}

$('#show-subtitle-edit').on('click', toggleDisplaySubtitle)
$('#hide-subtitle-edit').on('click', toggleDisplaySubtitle)
})(jQuery)
10 changes: 3 additions & 7 deletions assets/js/mobile-menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -297,13 +297,9 @@
var $newBtns = $('.sidebar .new-btn:not(.mobile-btn-imported)')
if ($newBtns.length > 0) {
var $prevElem = $('#content')
.find('> .content-wrapper, > .full-content-wrapper, > .content-col-2')
.first()
.find('h1, h2')
.first()
if ($prevElem.next('.license').length > 0) { $prevElem = $prevElem.next('.license') }
if ($prevElem.next('.subtitle').length > 0) { $prevElem = $prevElem.next('.subtitle') }
if ($prevElem.next('.taglist').length > 0) { $prevElem = $prevElem.next('.taglist') }
.find('> .content-wrapper, > .full-content-wrapper, > .content-col-2').first()
.find('header').first()
.find('.title').first()

var $newBtnContainer = $('<div/>', {
class: 'new-btn-container'
Expand Down
1 change: 1 addition & 0 deletions assets/scss/base/_forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,7 @@
}
.btn-inline {
display: inline-block;
cursor: pointer;
}
.btn-no-float {
float: none !important;
Expand Down
18 changes: 0 additions & 18 deletions assets/scss/layout/_main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -99,24 +99,6 @@
}
}

.license {
float: right;
margin: 0;
margin-top: 10px;
}

.subtitle {
font-size: 18px;
font-size: 1.8rem;
line-height: 23px;
color: #999;
margin-top: -15px;
margin-bottom: 15px;
padding: 10px 0;
font-weight: normal;
border-bottom: 1px solid #EEE;
}

.pubdate {
display: block;
color: #999;
Expand Down
1 change: 1 addition & 0 deletions assets/scss/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@
@import "pages/tutorial-history";
@import "pages/content-editor";
@import "pages/content-exports";
@import "pages/content-header";

/*-------------------------
10. High pixel ratio (retina)
Expand Down
1 change: 1 addition & 0 deletions assets/scss/pages/_content-editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
}

.edit-button {
cursor: pointer;
position: relative;

margin: 0 .4rem;
Expand Down
116 changes: 116 additions & 0 deletions assets/scss/pages/_content-header.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
.title {
margin-bottom: 15px;

.icon img {
display: block;
float: left;
width: 50px;
height: 50px;
}

.is-title {
display: flex;

padding: 0;
border-bottom: 1px solid $color-secondary;

>div {
flex-grow: 1;
display: flex;

h1 {
border: 0px;
margin-bottom: 0px;
}

.illu {
padding-left: 8px;
}
}

aside {
flex-grow: 0;
justify-content: flex-end;
display: flex;

.license {
justify-content: flex-end;
margin: 0;
margin-top: 10px;
}
}
}

.is-subtitle {
clear: both;
display: flex;

margin: 0;
margin-bottom:15px;
border-bottom: 1px solid #eee;

>div{
flex-grow: 1;
display: flex;
padding: 5px 0px;

h2 {
border: 0px;
margin-bottom: 0;
font-size: 18px;
font-size: 1.8rem;
line-height: 23px;
color: #999;
font-weight: normal;
}
}
}
}

.title-edit, .subtitle-edit {
flex-grow: 10;
display: flex;

form {
display: flex;

.control-group, .controls {
display: flex;
flex-grow: 1;
}

.control-label {
display: none;
}

input {
flex-grow: 1;
vertical-align: middle;
margin: 0;
padding: 0;
font-weight: normal;
//font-size: 2.2rem;
}

button.btn, button.btn-submit, button.link, button {
flex-grow: 0;
vertical-align: middle;
cursor: pointer;
line-height: 32px;
height: 32px;
}

button.link {
flex-grow: 0;
box-sizing: border-box;
color: lighten($color-primary, 20%);
transition: color $transition-duration ease, text-decoration $transition-duration ease;
text-decoration: underline;

&:hover {
color: darken($color-secondary, 15%);
text-decoration: none;
}
}
}
}
35 changes: 23 additions & 12 deletions templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -224,18 +224,29 @@
{% block schema %}{% endblock %}
{% endcaptureas %}
<section class="content-wrapper" {{ schema|safe }}>
<h1 {% if schema %}itemprop="name"{% endif %}>
{% block headline %}{% endblock %}
</h1>

{% captureas headlinesub %}
{% block headline_sub %}{% endblock %}
{% endcaptureas %}

{% if headlinesub %}
<h2 class="subtitle" {% if schema %}itemprop="description"{% endif %}>{{ headlinesub|safe }}</h2>
{% endif %}

<div class="title">
<div class="is-title">
<div>
<div class="editable-element" id="title-show">
<h1 {% if schema %}itemprop="name"{% endif %}>
{% block headline %}{% endblock %}
</h1>
</div>
</div>
</div>
{% captureas headlinesub %}
{% block headline_sub %}{% endblock %}
{% endcaptureas %}
{% if headlinesub %}
<div class="is-subtitle">
<div>
<div class="editable-element" id="subtitle-show">
<h2 class="subtitle" {% if schema %}itemprop="description"{% endif %}>{{ headlinesub|safe }}</h2>
</div>
</div>
</div>
{% endif %}
</div>
{% block content %}{% endblock %}
</section>
{% endblock %}
Expand Down
74 changes: 74 additions & 0 deletions templates/tutorialv2/includes/content_title.part.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
{% load i18n %}
{% load crispy_forms_tags %}

<div class="title">
{% if content.image %}
<div class="icon">
<img src="{{ content.image.physical.tutorial_illu.url }}" alt="">
</div>
{% endif %}
<div class="is-title">
<div>
<div class="editable-element" id="title-show">
<h1 {% if content.image %}class="illu"{% endif %}>{{ content.title }}</h1>
{% if editable %}
<a href="" class="edit-button" id="show-title-edit">
<span class="visuallyhidden">{% trans "Modifier le titre" %}</span>
</a>
{% endif %}
</div>
{% if editable %}
<div class="title-edit hidden {% if content.image %}illu{% endif %}" id="title-edit">
{% spaceless %}{% crispy form_edit_title %}{% endspaceless %}
</div>
{% endif %}
</div>

<aside>
{% if content.licence %}
<div class="editable-element license">
<p>{{ content.licence }}</p>
{% if editable %}
<a href="#edit-license" class="open-modal edit-button" title="{% trans "Modifier la licence" %}">
<span class="visuallyhidden">{% trans "Modifier la licence" %}</span>
</a>
{% endif %}
</div>
{% else %}
<p class="license">
<a href="#edit-license" class="open-modal">{% trans "Choisissez la licence de votre publication !" %}</a>
</p>
{% endif %}
{% if editable %}
{% crispy form_edit_license %}
{% endif %}
</aside>
</div>

{% if content.description or editable %}
<div class="is-subtitle">
<div>
<div class="editable-element" id="subtitle-show">
{% if content.description %}
<h2 class="subtitle">{{ content.description }}</h2>
{% endif %}
{% if editable %}
{% if content.description %}
<a href="" id="show-subtitle-edit" class="edit-button">
<span class="visuallyhidden">{% trans "Modifier le sous-titre" %}</span>
</a>
{% else %}
<a href="" id="show-subtitle-edit" class="link">{% trans "Ajouter un sous-titre" %}</a>
{% endif %}
{% endif %}
</div>

{% if editable %}
<div class="subtitle-edit hidden" id="subtitle-edit">
{% spaceless %}{% crispy form_edit_subtitle %}{% endspaceless %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
35 changes: 4 additions & 31 deletions templates/tutorialv2/view/content.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,38 +19,11 @@
{% endblock %}



{% block headline %}
{% if is_staff or can_edit %}
{% if content.licence %}
<div class="editable-element license">
<p>{{ content.licence }}</p>
<a href="#edit-license" class="open-modal edit-button" title="{% trans "Modifier la licence" %}">
<span class="visuallyhidden">{% trans "Modifier la licence" %}</span>
</a>
</div>
{% else %}
<p class="license">
<a href="#edit-license" class="open-modal">Choisissez la licence de votre publication !</a>
</p>
{% endif %}

{% crispy form_edit_license %}
{% elif content.licence %}
<span class="license">{{ content.licence }}</span>
{% endif %}

<h1 {% if content.image %}class="illu"{% endif %}>
{% if content.image %}
<img src="{{ content.image.physical.tutorial_illu.url }}" alt="">
{% endif %}
{{ content.title }}
</h1>

{% if content.description %}
<h2 class="subtitle">
{{ content.description }}
</h2>
{% if can_edit or is_staff %}
{% include "tutorialv2/includes/content_title.part.html" with content=content editable=True %}
{% else %}
{% include "tutorialv2/includes/content_title.part.html" with content=content editable=False %}
{% endif %}

{% if can_edit %}
Expand Down
19 changes: 1 addition & 18 deletions templates/tutorialv2/view/content_online.html
Original file line number Diff line number Diff line change
Expand Up @@ -71,24 +71,7 @@


{% block headline %}
{% if content.licence %}
<span class="license" itemprop="license">
{{ content.licence }}
</span>
{% endif %}

<h1 {% if content.image %}class="illu"{% endif %} itemprop="name">
{% if content.image %}
<img src="{{ content.image.physical.tutorial_illu.url }}" alt="" itemprop="thumbnailUrl">
{% endif %}
{{ content.title }}
</h1>

{% if content.description %}
<h2 class="subtitle" itemprop="description">
{{ content.description }}
</h2>
{% endif %}
{% include "tutorialv2/includes/content_title.part.html" with editable=False %}

{% include 'tutorialv2/includes/tags_authors.part.html' with content=content online=True %}

Expand Down
Loading

0 comments on commit 773f018

Please sign in to comment.