diff --git a/src/components/ArticleFooter.vue b/src/components/ArticleFooter.vue index 6d5beb55343fef6b90086d946a7a62882c1ad5e2..9acef4b6805db9416f02d3b5c603d871bfe730d5 100644 --- a/src/components/ArticleFooter.vue +++ b/src/components/ArticleFooter.vue @@ -1,29 +1,15 @@ <template> <div class="article_footer"> - <span v-if="hasPointer"> - <button aria-label="Del ordboksartikkel pÃ¥ Facebook" class="share_button" tabindex="0"> - <ShareNetwork network="facebook" - title="" - :url="share_link" - tabindex="-1"> - <v-icon dense>$vuetify.icons.facebook</v-icon> - </ShareNetwork> - </button> - <button aria-label="Del del ordboksartikkel pÃ¥ Twitter" class="share_button" tabindex="0"> - <ShareNetwork - network="twitter" - :url="share_link" - :title="dict_label" - hashtags="#ordbøkene" - tabindex="-1"> - <v-icon dense>$vuetify.icons.twitter</v-icon> - </ShareNetwork> - </button> - </span> - <button v-if="webShareApiSupported" aria-label="Del ordboksartikkelen med andre" class="share_button" tabindex="0" @click="shareViaWebShare"> - <span v-if="!hasPointer" class = "share_text">Del ordet</span> - <v-icon dense>$vuetify.icons.share</v-icon> - </button> + <v-btn v-if="!webShareApiSupported" x-small depressed class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare"> + <v-icon small>link</v-icon> <span class = "button-text">Kopier lenke</span> + </v-btn> + + <v-btn v-if="webShareApiSupported" depressed x-small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare"> + <v-icon x-small>share</v-icon><span class = "button-text">Del ordet</span> + </v-btn> + <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare"> + <v-icon x-small>format_quote</v-icon> <span class = "button-text">Siter</span> + </v-btn> <div class = "footer_title" tabindex="0">Ordbøkene.no </div> </div> @@ -67,19 +53,20 @@ export default { </script> <style scoped> -.share_text { - padding-right: 10px; - vertical-align: middle; +.button-text { + padding-left: 3px; + font-size: 12px; + color: var(--v-primary-base) !important; + font-variant: reverse !important; } .v-icon { color: var(--v-primary-base) !important; } -.share_button { - padding-right: 4px; - font-weight: bold; - font-size: 14px; +.toolbar-button { + margin-right: 3px; + font-size: 12px; } diff --git a/src/components/Header.vue b/src/components/Header.vue index 528ca51700ed20426a292e366314a7ec8e98ce38..2ffa3004272e52451ffb1c2a2c779dbfcc900611 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -19,13 +19,27 @@ </v-card> </v-menu>) </span> - + <div class="article-toolbar"> <!-- + <v-btn x-small depressed class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare"> + <v-icon small>link</v-icon> + </v-btn> + + <v-btn depressed small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare"> + <v-icon small>share</v-icon> + </v-btn> + <v-btn depressed small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare"> + <v-icon small>format_quote</v-icon> + </v-btn>--> + <v-btn class="show-inflection" rounded depressed small >Vis bøying ▾</v-btn> + <!-- <details :title="inflect_tooltip" @toggle="toggle()" v-if="inflected" :class="$vuetify.breakpoint.name"> <summary :class="dictionary" onclick="this.blur()" tabindex="0">bøying</summary> <div class="inflection-canvas"> <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" /> </div> - </details> + </details>--> +</div> + </div> </template> @@ -123,6 +137,17 @@ summary { text-align: center; } +.article-toolbar { + margin-top: 6px; +} + +.toolbar-button { + color: var(--v-primary-base) !important; + margin-right: 3px; +} + + + article h2 { padding-top: 4px; padding-bottom: 0px; @@ -244,6 +269,11 @@ article h2.secondary_header { font-size: 14px; } +.show-inflection { + color: var(--v-primary-base) !important; + font-weight: bold !important; +} + .context { color: var(--v-primary-lighten4) !important; }