feat(monument): change wikipedia articles switcher and load more

Author: yarl

src/components/main/monument/monument.html

@@ -75,18 +75,21 @@ <h4 class="monument__subtitle md-headline">Wikipedia</h4>
           <md-button class="md-primary md-icon-button"
                     ng-repeat="wiki in $ctrl.shownInterwiki"
                     ng-disabled="!$ctrl.monument.interwiki[wiki + 'wiki']"
-                    ng-href="{{$ctrl.monument.interwiki[wiki + 'wiki'].link}}">
+                    ng-click="$ctrl.getWikipedia(wiki, $ctrl.monument.interwiki[wiki + 'wiki'].title)">
             {{wiki}}
           </md-button>
         </div>
         <div class="article__text"
               ng-class="{'article__text--long' : $ctrl.showArticleLong}"
               ng-bind-html="$ctrl.article"></div>
-        <md-button class="md-primary"
-                    ng-if="$ctrl.isArticleLong && !$ctrl.showArticleLong"
-                    ng-click="$ctrl.showArticleLong = true">
-          Show more
-        </md-button>
+        <div class="article__more"
+              layout="column" layout-align="center stretch"
+              ng-if="$ctrl.isArticleLong && !$ctrl.showArticleLong">
+          <md-button class="md-primary"
+                      ng-click="$ctrl.showArticleLong = true">
+            Show more
+          </md-button>
+        </div>
       </div>
 
       <div class="monument monument__panel">
@@ -133,7 +136,7 @@ <h4 class="monument__subtitle md-headline">Map</h4>
             -->
             <md-button class="md-primary" flex
                         ng-href="#/map?c={{$ctrl.map.markers.marker.lat}}:{{$ctrl.map.markers.marker.lng}}:16">
-              <md-icon>map</md-icon> Show monuments nearby
+              <md-icon>map</md-icon> Show all monuments nearby
             </md-button>
           </div>
         </div>

src/components/main/monument/monument.js

@@ -12,6 +12,7 @@ function controller($http, $q, $sce, $stateParams, $timeout, $window, localStora
   const langs = langService.getUserLanguages();
 
   vm.getCommonsLink = getCommonsLink;
+  vm.getWikipedia = getWikipedia;
   vm.image = [];
   vm.lang = langs[0];
   vm.map = {};
@@ -35,7 +36,7 @@ function controller($http, $q, $sce, $stateParams, $timeout, $window, localStora
     });
   }
 
-  function getArticleHeader(lang, name) {
+  function getWikipedia(lang, name) {
     const language = lang.replace('wiki', '');
     WikiService.getArticleHeader(language, name).then((data) => {
       vm.article = $sce.trustAsHtml(data);
@@ -91,7 +92,7 @@ function controller($http, $q, $sce, $stateParams, $timeout, $window, localStora
       vm.monument.interwikis = Object.keys(vm.monument.interwiki).length;
       const articleInterwiki = vm.monument.interwiki[`${langs[0]}wiki`] || vm.monument.interwiki[`${langs[1]}wiki`] || vm.monument.interwiki[`${langs[2]}wiki`];
       if (articleInterwiki) {
-        getArticleHeader(articleInterwiki.site, articleInterwiki.title);
+        getWikipedia(articleInterwiki.site, articleInterwiki.title);
       }
       if (vm.monument.claims.P625) {
         const value = vm.monument.claims.P625.values[0].value;

src/components/main/monument/monument.scss

@@ -114,15 +114,15 @@ mo-monument {
       &.article__text--long {
         max-height: none;
       }
+    }
 
-      &:after {
-        // content: "";
-        // position: absolute; top: 0; bottom: 0; left: -15px; right: -15px;
-        // box-shadow: inset rgb(255,255,255) 0 -20px 10px;
-      }
+    .article__more {
+      margin-top: -14px;
+      z-index: 5;
+      box-shadow: inset rgb(255,255,255) 0 -45px 15px;
     }
 
-    .md-button {
+    .md-icon-button {
       margin-top: -18px;
     }
   }