Changeset 12740


Ignore:
Timestamp:
Mar 3, 2018, 9:31:47 AM (6 years ago)
Author:
jsanz
Message:

updated theme to allow strip and expand articles

Location:
planet/venus
Files:
1 added
1 deleted
6 edited

Legend:

Unmodified
Added
Removed

  • planet/venus

    • Property svn:ignore set to
      env

  • planet/venus/themes/osgeo_v2/config.ini

    r12737 r12740  
    2525  resources/images/forest.jpg
    2626  resources/js/bootstrap.min.js.map
    27   resources/js/jk.min.js
    2827  resources/fonts/Sintony-Bold.ttf
    2928  resources/fonts/MiriamLibre-Bold.ttf

  • planet/venus/themes/osgeo_v2/index.html.tmpl

    r12737 r12740  
    88
    99        <link rel="stylesheet" href="resources/css/bootstrap.min.css">
    10         <style>
    11                 @import url('resources/fonts/fonts.css');
    12 
    13                 body {
    14                         font-family: "Sintony", sans-serif;
    15                         font-weight: normal;
    16                 }
    17 
    18                 main.entrygroup{
    19                         max-width: 100%;
    20                 }
    21                
    22                 .content img, .content figure{
    23                         max-width: 95%;
    24                 }
    25 
    26                 a, h1, h2, h3, h4 {
    27                         color: #003A40;
    28                 }
    29 
    30                 article header h3 a,  .content a, .sidebar a{
    31                         color: #4DB05B;
    32                 }
    33 
    34                 article header h3 a:hover,  .content a:hover, .sidebar a:hover{
    35                         color: #003A40;
    36                         text-decoration: none;
    37                 }
    38 
    39                 h1, h2, h3, h4 {
    40                         font-family: "Miriam Libre", sans-serif;
    41                         font-weight: bold;
    42                 }
    43 
    44                 article header h4{
    45                         font-weight: 500;
    46                         font-style: italic;
    47                         font-size: 1.25rem;
    48                 }
    49 
    50                 .sidebar p, .sidebar li {
    51                         font-family: "Miriam Libre", sans-serif;
    52                 }
    53 
    54                 .planet-header{
    55                         background: url('resources/images/forest.jpg') top center no-repeat;
    56                         margin: 0 0 25px 0;
    57                         padding: 80px 25px;
    58                 }
    59                 .planet-header h1{
    60                         color: white;
    61                 }
    62 
    63                 header .title {
    64                         text-align: right;
    65                 }
    66                 .osgeo-logo{
    67                         max-width: 100%;
    68                         margin: 15px auto 15px auto;
    69                         text-align: cenetr;
    70                 }
    71                
    72                 article{
    73                         margin-bottom: 25px;
    74                         padding: 0 15px;
    75                 }
    76 
    77                 article.current{
    78                         background: #f9f9f9;
    79                         border: 1px dashed #003A40;
    80                 }
    81                
    82                 .blog-title, .blog-logo{
    83                         padding: 0;
    84                 }
    85                
    86                 .article-title{
    87                         padding: 0;
    88                         margin: 20px 15px 20px 0;
    89                 }
    90                
    91                 .blog-date{
    92                         margin-top: 20px;
    93                 }
    94                
    95                 .blog-logo{
    96                         text-align: right;
    97                 }
    98 
    99                 main.entrygroup{
    100                         max-width: 100%;
    101                 }
    102                
    103                 .content img, .content figure{
    104                         max-width: 95%;
    105                         height: auto;
    106                 }
    107                
    108                 .face{
    109                         max-width: 80px;
    110                         max-height: 80px;
    111                 }
    112 
    113                 .sidebar{
    114                         padding-left: 30px;
    115                 }
    116 
    117                 .sidebar a.message{
    118                         color: red;
    119                 }
    120 
    121         .footer{
    122                         background: #eaeaea;
    123                         padding: 30px 0px;
    124                         text-align: center;
    125         }
    126 
    127                 @media (max-width: 800px){
    128                         header .title, .blog-logo{
    129                                 display: none;
    130                         }
    131                 }
    132         </style>
     10        <link rel="stylesheet" href="planet.css">
     11        <script src="planet.js"></script>
    13312
    13413<TMPL_IF feedtype>
    … …  
    13615</TMPL_IF>
    13716</head>
    138 
    139 
    14017
    14118<body class="container">
    … …  
    293170                </div>
    294171        </footer>
    295         <script src="resources/js/jk.min.js"></script>
    296         <script>
    297                         jk.init({elements: 'article',
    298                                          activeClass: 'current'
    299                                         });
    300                   </script>
    301172</body>
    302173</html>

  • planet/venus/themes/osgeo_v2/planet.js

    r12734 r12740  
    1 function run() {
    2     // do something
     1/* jshint strict: true,  unused: true, esversion: 6*/
     2
     3/*
     4 Helper functions from plainjs.com
     5*/
     6function insertBefore(el, referenceNode) {
     7    'use strict';
     8    referenceNode.parentNode.insertBefore(el, referenceNode);
    39}
    410
     11function addEvent(el, type, handler) {
     12    'use strict';
     13    if (el.attachEvent) el.attachEvent('on' + type, handler);
     14    else el.addEventListener(type, handler);
     15}
     16
     17// fade an element from the current state to full opacity in "duration" ms
     18function fadeOut(el, duration) {
     19    /* jshint expr: true */
     20    'use strict';
     21    var s = el.style,
     22        step = 25 / (duration || 300);
     23    s.opacity = s.opacity || 1;
     24    (function fade() {
     25        (s.opacity -= step) < 0 ? s.display = "none" : setTimeout(fade, 25);
     26    })();
     27}
     28
     29// fade out an element from the current state to full transparency in "duration" ms
     30// display is the display style the element is assigned after the animation is done
     31function fadeIn(el, duration, display) {
     32    /* jshint expr: true */
     33    'use strict';
     34    var s = el.style,
     35        step = 25 / (duration || 300);
     36    s.opacity = s.opacity || 0;
     37    s.display = display || "block";
     38    (function fade() {
     39        (s.opacity = parseFloat(s.opacity) + step) > 1 ? s.opacity = 1 : setTimeout(fade, 25);
     40    })();
     41}
     42
     43function toggle(el, value, isFaded) {
     44    'use strict';
     45    var display = (window.getComputedStyle ? getComputedStyle(el, null) : el.currentStyle).display;
     46    if (display == 'none') {
     47        if (isFaded) {
     48            fadeIn(el, 400, value);
     49        } else {
     50            el.style.display = value;
     51        }
     52    } else {
     53        if (isFaded) {
     54            fadeOut(el, 400, 'none');
     55        } else {
     56            el.style.display = 'none';
     57        }
     58    }
     59}
     60
     61
     62/*
     63 Toggles the visibility of the article elements
     64*/
     65function toggleArticleVisibility(article) {
     66    'use strict';
     67    // Get children
     68    let children = article.target ? article.target.parentNode.parentNode.childNodes : article.childNodes,
     69        number_of_children = children.length,
     70        pCount = 0;
     71    for (let i = 0; i < number_of_children; i++) {
     72        const el = children[i];
     73        const elName = el.nodeName.toLowerCase();
     74
     75        // Hide all higher than 2
     76        if (el.style) {
     77            if (elName == 'p') {
     78                pCount = pCount + 1;
     79
     80                if (pCount > 2) {
     81                    toggle(el, 'block', true);
     82                }
     83            } else if (elName == 'div' && el.classList.contains('js-read')) {
     84                for (let i = 0; i < el.childNodes.length; i++) {
     85                    toggle(el.childNodes[i], 'block', false);
     86                }
     87            } else {
     88                toggle(el, 'block', true);
     89            }
     90        }
     91    }
     92
     93    return pCount;
     94}
     95
     96/*
     97 Takes an article and modify it to add a read more/less links
     98 This is supposed to happen only once
     99*/
     100function processArticle(article) {
     101    'use strict';
     102    // Hide contents (except first two paragraphs)
     103    const pCount = toggleArticleVisibility(article);
     104
     105    // Append the Read More/Less div
     106    let children = article.childNodes,
     107        i = 0,
     108        el = children[i];
     109
     110    do {
     111        i = i + 1;
     112        el = children[i];
     113    } while (el && (el.style === undefined));
     114
     115    if (el && el.style && pCount > 2) {
     116
     117        // Create the read more paragraph
     118        const pReadMore = document.createElement('p');
     119        pReadMore.classList.add('js-read');
     120        pReadMore.classList.add('js-more');
     121        pReadMore.innerHTML = 'Read more...';
     122        addEvent(pReadMore, 'click', toggleArticleVisibility);
     123
     124        // Create the read less paragraph
     125        const pReadLess = document.createElement('p');
     126        pReadLess.classList.add('js-read');
     127        pReadLess.classList.add('js-less');
     128        pReadLess.innerHTML = 'Read less...';
     129        pReadLess.style.display = 'none';
     130        addEvent(pReadLess, 'click', toggleArticleVisibility);
     131
     132        // Create a div for the paragraphs
     133        const divReadMore = document.createElement('div');
     134        divReadMore.classList.add('js-read');
     135        insertBefore(divReadMore, el);
     136
     137        // Add the paragraphs to the div
     138        divReadMore.appendChild(pReadMore);
     139        divReadMore.appendChild(pReadLess);
     140    }
     141}
     142
     143function run() {
     144    'use strict';
     145    // process articles
     146    for (let article of document.getElementsByClassName('content')) {
     147        processArticle(article);
     148    }
     149}
     150
     151
    5152// in case the document is already rendered
    6 if (document.readyState!='loading') run();
     153if (document.readyState != 'loading') run();
    7154// modern browsers
    8155else if (document.addEventListener) document.addEventListener('DOMContentLoaded', run);
    9156// IE <= 8
    10 else document.attachEvent('onreadystatechange', function(){
    11     if (document.readyState=='complete') run();
     157else document.attachEvent('onreadystatechange', function () {
     158    'use strict';
     159    if (document.readyState == 'complete') run();
    12160});

  • planet/venus/themes/osgeo_v2/resources/fonts/fonts.css

    r12734 r12740  
    44        font-style: normal;
    55        font-weight: 400;
    6         src: local('Miriam Libre Regular'), local('MiriamLibre-Regular'), url(https://fonts.gstatic.com/s/miriamlibre/v3/Ljtpu8zR5iJWmlN3Faba5T0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
    7         unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
    8   }
    9   /* latin */
    10   @font-face {
    11         font-family: 'Miriam Libre';
    12         font-style: normal;
    13         font-weight: 400;
    14         src: local('Miriam Libre Regular'), local('MiriamLibre-Regular'), url(https://fonts.gstatic.com/s/miriamlibre/v3/Ljtpu8zR5iJWmlN3Faba5egdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
    15         unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
     6        src: local('Miriam Libre Regular'), local('MiriamLibre-Regular'), url(MiriamLibre-Regular.ttf);
    167  }
    178  /* latin-ext */
    … …  
    2011        font-style: normal;
    2112        font-weight: 700;
    22         src: local('Miriam Libre Bold'), local('MiriamLibre-Bold'), url(https://fonts.gstatic.com/s/miriamlibre/v3/FLc0J-Gdn8ynDWUkeeesAOIaMZP5eRGvEWe_CNIU_oY.woff2) format('woff2');
    23         unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
    24   }
    25   /* latin */
    26   @font-face {
    27         font-family: 'Miriam Libre';
    28         font-style: normal;
    29         font-weight: 700;
    30         src: local('Miriam Libre Bold'), local('MiriamLibre-Bold'), url(https://fonts.gstatic.com/s/miriamlibre/v3/FLc0J-Gdn8ynDWUkeeesAHNuWYKPzoeKl5tYj8yhly0.woff2) format('woff2');
    31         unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
     13        src: local('Miriam Libre Bold'), local('MiriamLibre-Bold'), url(MiriamLibre-Bold.ttf);
    3214  }
    3315  /* latin-ext */
    … …  
    3618        font-style: normal;
    3719        font-weight: 400;
    38         src: local('Sintony'), url(https://fonts.gstatic.com/s/sintony/v5/NSpavdvike7xipHfiByCrPY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
    39         unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
    40   }
    41   /* latin */
    42   @font-face {
    43         font-family: 'Sintony';
    44         font-style: normal;
    45         font-weight: 400;
    46         src: local('Sintony'), url(https://fonts.gstatic.com/s/sintony/v5/CxEtQ1VGsZ4sZv6p3ztOzw.woff2) format('woff2');
    47         unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
     20        src: local('Sintony'), url(Sintony-Regular.ttf);
    4821  }
    4922  /* latin-ext */
    … …  
    5225        font-style: normal;
    5326        font-weight: 700;
    54         src: local('Sintony Bold'), local('Sintony-Bold'), url(https://fonts.gstatic.com/s/sintony/v5/NBeaBKmA1yw4KFklLc4VJCEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
    55         unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
     27        src: local('Sintony Bold'), local('Sintony-Bold'), url(Sintony-Bold.ttf);
    5628  }
    57   /* latin */
    58   @font-face {
    59         font-family: 'Sintony';
    60         font-style: normal;
    61         font-weight: 700;
    62         src: local('Sintony Bold'), local('Sintony-Bold'), url(https://fonts.gstatic.com/s/sintony/v5/TiXPkS2VjL9yF_daQZv9Ivk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
    63         unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
    64   }
Note: See TracChangeset for help on using the changeset viewer.