Wiki Pages style

app/locales/taiga/locale-en.json

@@ -1459,6 +1459,7 @@
         "DELETE_LIGHTBOX_TITLE": "Delete Wiki Page",
         "DELETE_LINK_TITLE": "Delete Wiki link",
         "NAVIGATION": {
+            "HOME": "Main Page",
             "SECTION_NAME": "Links",
             "ACTION_ADD_LINK": "Add link",
             "ALL_PAGES": "All pages"

app/partials/wiki/wiki-list.jade

@@ -1,10 +1,15 @@
 doctype html
 
-div.wrapper(ng-controller="WikiPagesListController as ctrl",
+div.wrapper(
-            ng-init="section='wiki'")
+    ng-controller="WikiPagesListController as ctrl"
+    ng-init="section='wiki'"
+)
     tg-project-menu
     sidebar.menu-secondary.extrabar(ng-if="linksVisible")
-        section.wiki-nav(tg-wiki-nav, ng-model="wikiLinks")
+        section.wiki-nav(
+            tg-wiki-nav
+            ng-model="wikiLinks"
+        )
     section.main.wiki
         header
             h1
@@ -33,12 +38,20 @@ div.wrapper(ng-controller="WikiPagesListController as ctrl",
                     translate="WIKI.PAGES_LIST_COLUMNS.MODIFIED"
                 )
 
-            div.row.table-main(ng-repeat="wikipage in wikipages track by wikipage.slug")
+            .row.table-main(ng-repeat="wikipage in wikipages track by wikipage.slug")
-                div.title-field
+                .title-field
-                    a(href="", tg-nav="project-wiki-page:project=project.slug,slug=wikipage.slug")
+                    a(
-                        | {{wikipage.slug}}
+                        href=""
-                div.editions-field {{wikipage.editions}}
+                        tg-nav="project-wiki-page:project=project.slug,slug=wikipage.slug"
-                div.creator-field(tg-user-display, tg-user-id="{{wikipage.owner}}")
+                    ) {{wikipage.slug}}
-                div.created-field(tg-bo-bind="wikipage.created_date|momentFormat:'DD MMM YYYY HH:mm'")
+                .editions-field {{wikipage.editions}}
-                div.last-modifier-field(tg-user-display, tg-user-id="{{wikipage.last_modifier}}")
+                .creator-field(
-                div.modified-field(tg-bo-bind="wikipage.modified_date|momentFormat:'DD MMM YYYY HH:mm'")
+                    tg-user-display
+                    tg-user-id="{{wikipage.owner}}"
+                )
+                .created-field(tg-bo-bind="wikipage.created_date|momentFormat:'DD MMM YYYY HH:mm'")
+                .last-modifier-field(
+                    tg-user-display
+                    tg-user-id="{{wikipage.last_modifier}}"
+                )
+                .modified-field(tg-bo-bind="wikipage.modified_date|momentFormat:'DD MMM YYYY HH:mm'")

app/partials/wiki/wiki-nav.jade

@@ -1,29 +1,45 @@
 header
-  h1(translate="WIKI.NAVIGATION.SECTION_NAME")
+    h1(translate="WIKI.NAVIGATION.SECTION_NAME")
-  a(href="", tg-nav="project-wiki-list:project=project.slug", translate="WIKI.NAVIGATION.ALL_PAGES")
 
 nav
-  ul.sortable
+    ul
-    li.wiki-link(ng-repeat="link in wikiLinks", data-id!="{{ $index }}", tg-bind-scope)
+        li.wiki-link
-        tg-svg.dragger(svg-icon="icon-drag")
+            a.link-title(
-        a.link-title(title!="{{ link.title }}", href!="{{ link.url }}") {{ link.title }}
+                href=""
+                tg-nav="project-wiki-list:project=project.slug"
+                translate="WIKI.NAVIGATION.ALL_PAGES"
+            )
 
-        <% if (deleteWikiLinkPermission) { %>
+        li.wiki-link
-        a.js-delete-link.remove-wiki-page(title!="{{'WIKI.DELETE_LINK_TITLE' | translate}}")
+            a.link-title(
-            tg-svg(svg-icon="icon-trash")
+                href=""
-        <% } %>
+                tg-nav="project-wiki:project=project.slug"
+                translate="WIKI.NAVIGATION.HOME"
+            )
 
-        input.hidden(
+    ul.sortable
-            type="text"
+        li.wiki-link(ng-repeat="link in wikiLinks", data-id!="{{ $index }}", tg-bind-scope)
-            placeholder="{{'COMMON.FIELDS.NAME' | translate}}"
+            <% if (addWikiLinkPermission) { %>
-            value!="{{ link.title }}"
+            tg-svg.dragger(svg-icon="icon-drag")
-        )
+            <% } %>
+            a.link-title(title!="{{ link.title }}", href!="{{ link.url }}") {{ link.title }}
 
-    li.new.hidden
+            <% if (deleteWikiLinkPermission) { %>
-        input(
+            a.js-delete-link.remove-wiki-page(title!="{{'WIKI.DELETE_LINK_TITLE' | translate}}")
-            type="text"
+                tg-svg(svg-icon="icon-trash")
-            placeholder="{{'COMMON.FIELDS.NAME' | translate}}"
+            <% } %>
-        )
+
+            input.hidden(
+                type="text"
+                placeholder="{{'COMMON.FIELDS.NAME' | translate}}"
+                value!="{{ link.title }}"
+            )
+
+        li.new.hidden
+            input(
+                type="text"
+                placeholder="{{'COMMON.FIELDS.NAME' | translate}}"
+            )
 
 <% if (addWikiLinkPermission) { %>
 a(

app/partials/wiki/wiki-summary.jade

@@ -1,14 +1,14 @@
-div.wiki-times-edited
+.wiki-username-edition
-    span.number <%- totalEditions %>
+    .avatar
-    span.description(translate="WIKI.SUMMARY.TIMES_EDITED")
-
-div.wiki-last-modified
-    span.number <%- lastModifiedDate %>
-    span.description(translate="WIKI.SUMMARY.LAST_EDIT")
-
-div.wiki-username-edition
-    figure.avatar
         img(src!="<%- user.imgUrl %>" alt!="<%- user.name %>")
-    div.wiki-user-modification
+    .wiki-user-modification
         span.description(translate="WIKI.SUMMARY.LAST_MODIFICATION")
         span.username <%- user.name %>
+
+.wiki-last-modified
+    span.number <%- lastModifiedDate %>
+    span.description(translate="WIKI.SUMMARY.LAST_EDIT")
+    
+.wiki-times-edited
+    span.number <%- totalEditions %>
+    span.description(translate="WIKI.SUMMARY.TIMES_EDITED")

app/partials/wiki/wiki.jade

@@ -4,7 +4,10 @@ div.wrapper(ng-controller="WikiDetailController as ctrl",
             ng-init="section='wiki'")
     tg-project-menu
     sidebar.menu-secondary.extrabar(ng-if="linksVisible")
-        section.wiki-nav(tg-wiki-nav, ng-model="wikiLinks")
+        section.wiki-nav(
+            tg-wiki-nav
+            ng-model="wikiLinks"
+        )
     section.main.wiki
         header
             h1
@@ -12,13 +15,18 @@ div.wrapper(ng-controller="WikiDetailController as ctrl",
                 span.green(translate="PROJECT.SECTION.WIKI")
 
 
-        div.summary.wiki-summary(tg-wiki-summary, ng-model="wiki", ng-if="wiki.id")
         h2.wiki-title(ng-bind='wikiTitle')
         section.wiki-content(
             tg-editable-wysiwyg,
             tg-editable-wiki-content,
             ng-model="wiki"
         )
+        
+        div.summary.wiki-summary(
+            tg-wiki-summary
+            ng-model="wiki"
+            ng-if="wiki.id"
+        )
 
         tg-attachments-full(
             ng-if="wiki.id"

app/styles/components/basic-table.scss

@@ -11,6 +11,9 @@
         padding: .3rem 0;
         text-align: left;
         width: 100%;
+        @include breakpoint(tablet) {
+            flex-direction: column;
+        }
         @for $i from 1 through 8 {
             .width-#{$i} {
                 flex-basis: 50px;

app/styles/layout/wiki.scss

@@ -1,11 +1,17 @@
 .wiki {
+    .wysiwyg {
+        margin-bottom: 0;
+    }
     .wiki-title {
         @include font-type(light);
-        @include font-size(larger);
+        @include font-size(xxlarge);
+        margin-bottom: 0;
+        padding: 1rem;
     }
     .remove {
         @include font-size(small);
         color: $gray-light;
+        cursor: pointer;
         &:hover {
             color: $red-light;
             transition: color .1s linear;
@@ -22,8 +28,8 @@
 }
 
 .wiki-content {
-    @include cursor-progress;
+    @include font-size(large);
-    margin-bottom: 2rem;
+    max-width: 1024px;
     position: relative;
     &.editable {
         &:hover {
@@ -91,93 +97,3 @@
         top: .4rem;
     }
 }
-
-.wiki-pages-table {
-    display: flex;
-    margin-bottom: 2rem;
-    &.empty {
-        display: none;
-    }
-    .row {
-        &:hover {
-            background: lighten($primary, 65%);
-            transition: background .2s ease-in;
-        }
-        .icon {
-            display: inline;
-        }
-    }
-    .title {
-        @include font-size(medium);
-        @include font-type(bold);
-        border-bottom: 1px solid $gray-light;
-        &:hover {
-            background: transparent;
-        }
-        div {
-            cursor: pointer;
-        }
-        .votes {
-            color: $gray;
-        }
-    }
-    .table-main {
-        @include font-size(small);
-        border-bottom: 1px solid darken($whitish, 4%);
-    }
-    .avatar {
-        align-items: center;
-        display: flex;
-        img {
-            width: 35px;
-        }
-        figcaption {
-            flex-basis: 60%;
-            flex-grow: 1;
-            margin-left: .5rem;
-        }
-    }
-    .title-field {
-        overflow: hidden;
-        padding-right: 1rem;
-        width: 100%;
-        a {
-            @include ellipsis(100%);
-            display: block;
-        }
-        span {
-            vertical-align: middle;
-            &:first-child {
-                margin-right: .5rem;
-            }
-        }
-    }
-    .editions-field,
-    .created-field,
-    .modified-field,
-    .creator-field ,
-    .last-modifier-field {
-        flex-basis: 140px;
-        flex-grow: 1;
-        flex-shrink: 0;
-        padding: 0 1rem;
-        position: relative;
-        text-align: left;
-    }
-    .creator-field ,
-    .last-modifier-field {
-        display: flex;
-        flex-basis: 180px;
-        flex-direction: row;
-        .user-avatar {
-            flex-grow: 0;
-            img {
-                height: 48px;
-            }
-        }
-        .user-full-name {
-            flex-grow: 1;
-            padding: .5rem;
-        }
-    }
-}

app/styles/modules/wiki/wiki-nav.scss

@@ -47,9 +47,6 @@
 }
 
 .wiki-nav {
-    ul {
-        border-top: 1px solid $gray-light;
-    }
     .add-button {
         color: $white;
         display: block;

app/styles/modules/wiki/wiki-pages-table.scss

@@ -0,0 +1,48 @@
+.wiki-pages-table {
+    display: flex;
+    .row {
+        padding: .5rem;
+    }
+    .title {
+        @include font-size(medium);
+        @include font-type(bold);
+    }
+    .table-main {
+        @include font-size(small);
+    }
+    .title-field {
+        flex-basis: 180px;
+        flex-grow: 1;
+        flex-shrink: 0;
+    }
+    .created-field,
+    .created-field,
+    .modified-field {
+        flex-basis: 10vw;
+        flex-grow: 0;
+        flex-shrink: 0;
+        margin-right: .5rem;
+    }
+    .editions-field {
+        flex-basis: 80px;
+        flex-grow: 0;
+        flex-shrink: 0;
+        margin-right: .5rem;
+    }
+    .creator-field,
+    .last-modifier-field {
+        align-items: center;
+        display: flex;
+        flex-basis: 200px;
+        .user-avatar {
+            flex-grow: 0;
+            img {
+                height: 2rem;
+            }
+        }
+        .user-full-name {
+            flex-grow: 1;
+            padding: .5rem;
+        }
+    }
+}

app/styles/modules/wiki/wiki-summary.scss

@@ -1,28 +1,30 @@
 .wiki-summary {
     align-items: center;
-    flex-wrap: wrap;
     justify-content: flex-start;
+    margin-top: 1rem;
+    &.summary {
+        background: $whitish;
+        color: $gray;
+    }
     div {
         display: flex;
-        justify-content: space-between;
+        margin-right: 1.25rem;
-        margin-right: 1rem;
-    }
-    .number {
-        line-height: 2rem;
-        top: 0;
     }
     .wiki-user-modification {
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
     }
-    figure {
+    .avatar {
-        margin-right: .3rem;
+        margin-right: .5rem;
-        width: 32px;
+        width: 2.25rem;
+    }
+    img {
+        height: 100%;
+        width: 100%;
     }
     .username {
         @include font-size(large);
-        color: $primary-light;
         white-space: nowrap;
     }
 }