monumental-wlm/src/components/image/image.tpl.html at 5418ec124540edbb498a5565e4492a20ca87838d · hatnote/monumental-wlm · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<md-dialog class="dialog__image" ng-keydown="keyDown($event)">
  <form ng-cloak>
    <md-dialog-content layout="row" layout-align="start stretch"
                        layout-xs="column" layout-align-xs="start stretch">
      <div class="dialog__image-container" flex flex-xs="none"
            layout="row" layout-align="center center"
            ng-swipe-right="nextImage()"
            ng-swipe-left="prevImage()">
            <md-button class="md-icon-button dialog__close" ng-click="close()">
              <md-icon>close</md-icon>
            </md-button>
            <md-button ng-if="activate_scroll && " class="md-icon-button dialog__next_img" ng-click="nextImage()">
              <md-icon>skip_next</md-icon>
            </md-button>
            <md-button ng-if="activate_scroll" class="md-icon-button dialog__prev_img" ng-click="prevImage()">
              <md-icon>skip_previous</md-icon>
            </md-button>
        <img load-src="{{ image.thumburlbig }}">
      </div>
      <div class="dialog__image-description"
         layout="column" layout-align="start stretch">
        <h2 class="md-title">{{ (description || image.canonicaltitle) | htmlToPlaintext }}</h2>
        <div>{{ author | htmlToPlaintext }} / {{ license }}</div>
        <md-list flex>
          <md-list-item class="md-2-line">
            <md-icon>
              cloud_upload
              <md-tooltip>File upload date</md-tooltip>
            </md-icon>
            <div class="md-list-item-text">
              <h3>{{ date | date }}</h3>
              <p>{{ date | date:'EEEE' }}, {{ date | date:'H:mm' }}</p>
            </div>
          </md-list-item>
          <md-list-item class="md-2-line">
            <md-icon>
              image
              <md-tooltip>File resolution</md-tooltip>
            </md-icon>
            <div class="md-list-item-text">
              <h3>{{ (image.width * image.height) / 1000000 | number:2 }} Mpix</h3>
              <p>{{ image.width }} × {{ image.height }}</p>
            </div>
          </md-list-item>
          <md-divider></md-divider>
          <md-list-item class="md-2-line">
            <md-button class="md-primary" flex
                        ng-href="{{ image.descriptionurl }}" target="_blank">
              Wikimedia Commons
            </md-button>
          </md-list-item>
        </md-list>
        <div flex></div>
      </div>
    </md-dialog-content>
  </form>
</md-dialog>