commit de0e3b9a5285c9d13298f80947f51f3856e465dc Author: emma peel <emma.peel@riseup.net> Date: Thu May 13 11:22:37 2021 +0200 implement presentations for trainings as part of the community portal. see instructions to write presentation at https://gitlab.torproject.org/tpo/web/wiki/-/blob/master/create-a-presentati.... will-fix: https://gitlab.torproject.org/tpo/community/l10n/-/issues/40010 --- assets/static/revealjs/dist/theme/tor.css | 31 +++++++++++++++++++++++++++--- flowblocks/slide.ini | 17 ++++++++++++++-- models/slideshow.ini | 5 ++++- templates/blocks/slide.html | 29 +++++++++++++++++----------- templates/slideshow.html | 32 ++++++++++++++++--------------- 5 files changed, 82 insertions(+), 32 deletions(-) diff --git a/assets/static/revealjs/dist/theme/tor.css b/assets/static/revealjs/dist/theme/tor.css index 2c55510..60c6c37 100644 --- a/assets/static/revealjs/dist/theme/tor.css +++ b/assets/static/revealjs/dist/theme/tor.css @@ -23,7 +23,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba --heading-color: #683086; --heading-line-height: 1.2; --heading-letter-spacing: normal; - --heading-text-transform: uppercase; + --heading-text-transform: none; --heading-text-shadow: none; --heading-font-weight: 600; --heading1-text-shadow: none; @@ -77,7 +77,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba font-weight: 600; line-height: 1.2; letter-spacing: normal; - text-transform: uppercase; + text-transform: none; text-shadow: none; word-wrap: break-word; } @@ -301,14 +301,31 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba *********************************************/ @media print { .backgrounds { - background-color: #fff; } } + background-color: #fff; } +} +.print-pdf .footer { + display: none; +} /********************************************* * FOOTER *********************************************/ .footer { background-color: #683086; + min-height: 10%; +} + +.footer img { + position:relative; + min-height: 1.5em; + padding: 5px; +} + +.footer a { + font-size: 1.5em !important; + padding: 5px; + top: 10px; } /********************************************* @@ -325,3 +342,11 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba hr.dark { border: 5px solid #683086; } + +.order-last { + text-align: left !important; +} + +.order-first { + text-align: right !important; +} diff --git a/flowblocks/slide.ini b/flowblocks/slide.ini index 23cf3fb..78effe7 100644 --- a/flowblocks/slide.ini +++ b/flowblocks/slide.ini @@ -6,6 +6,11 @@ label = Title type = markdown translate = True +[fields.subtitle] +label = Subtitle +type = markdown +translate = True + [fields.description] label = Description type = markdown @@ -15,16 +20,24 @@ translate = True label = Image type = select source = record.attachments.images +translate = False [fields.background] label = Background color type = string +translate = False -[fields.layout] +[fields.slide_layout] label = Slide layout type = string +translate = False -[fields.background-image] +[fields.background_image] label = Background image type = string translate = False + +[fields.author] +label = Author +type = string +translate = False diff --git a/models/slideshow.ini b/models/slideshow.ini index 7d0116a..3f2062f 100644 --- a/models/slideshow.ini +++ b/models/slideshow.ini @@ -15,6 +15,7 @@ translate = True [fields.author] label = Author type = string +translate = False [fields.subtitle] label = Subtitle @@ -25,16 +26,18 @@ translate = True label = Slides type = flow flow_blocks = slide -translate = False [fields.color] label = Color type = string +translate = False [fields.image] label = image type = string +translate = False [fields.background] label = background type = string +translate = False diff --git a/templates/blocks/slide.html b/templates/blocks/slide.html index e0421ea..2d89823 100644 --- a/templates/blocks/slide.html +++ b/templates/blocks/slide.html @@ -1,13 +1,20 @@ -{% if this.layout == "title" %} -<section class="title" data-background-color="white" data-background-image="{{ this.image|asseturl }}" data-background-position="right bottom" data-background-size="3em"> - <h3>{{ this.title }}</h3> - <hr class="dark" /> - <h4>{{ this.subtitle }}</h4> -</section> +{% if this.slide_layout == "title-slide" %} + <section class="title" data-background-color="white" {% if this.background_image %} data-background-image="{{ this.background_image|asseturl }}" data-background-position="right bottom" data-background-size="3em" {% endif %} > + <h3>{{ this.title }}</h3> + <hr class="dark" /> + {% if this.subtitle %} + <h4>{{ this.subtitle }}</h4> + {% endif %} + {% if this.author %} + <h5>{{ this.author }}</h5> + {% endif %} + </section> {% else %} -<section data-background-color="{{ this.background }}"> - <h2>{{ this.title }}</h2> - {{ this.description }} - -</section> + <section {% if this.background != "white" %} data-background-color="{{ this.background }}" {% else %} data-background-color="white" {% endif %} > + <h2>{{ this.title }}</h2> + {{ this.description }} + {% if this.image %} + <img data-src="{{ this.image }}"> + {% endif %} + </section> {% endif %} diff --git a/templates/slideshow.html b/templates/slideshow.html index f1d6065..c6b330e 100644 --- a/templates/slideshow.html +++ b/templates/slideshow.html @@ -16,24 +16,26 @@ <body> <div class="reveal"> <!-- Any section element inside of this container is displayed as a slide --> - <div class="slides"> - <section class="title" data-background-color="#683086" data-background-image="{{ this.image|asseturl }}" data-background-position="right bottom" data-background-size="3em"> - <h3>{{ this.title }}</h3> - <hr /> - <h4>{{ this.subtitle }}</h4> - <p>{{ this.author }}</p> - </section> + <div class="slides {{ bag('alternatives', this.alt, 'order') }}"> + <section> + <section class="title" data-background-color="#683086" data-background-image="{{ this.image|asseturl }}" data-background-position="right bottom" data-background-size="3em"> + <h3>{{ this.title }}</h3> + <hr /> + <h4>{{ this.subtitle }}</h4> + <p>{{ this.author }}</p> + </section> - {{ this.slides }} + {{ this.slides }} - <div class="footer"> - <div class="left"> - <a href="https://torproject.org">torproject.org</a> - </div> - <div class="right"> - <img src="{{ '/static/images/tor-logo/White.png'|asseturl }}"> + <div class="footer"> + <div class="left"> + <a href="https://torproject.org">torproject.org</a> + </div> + <div class="right"> + <img src="{{ '/static/images/tor-logo/White.png'|asseturl }}"> + </div> </div> - </div> + </section> </div> </div>