diff --git a/src/web/app/desktop/views/components/images.vue b/src/web/app/common/views/components/images.vue similarity index 97% rename from src/web/app/desktop/views/components/images.vue rename to src/web/app/common/views/components/images.vue index f02ecbaa8..dc802a018 100644 --- a/src/web/app/desktop/views/components/images.vue +++ b/src/web/app/common/views/components/images.vue @@ -4,13 +4,6 @@ </div> </template> -<style lang="stylus" scoped> -.mk-images - display grid - grid-gap 4px - height 256px -</style> - <script lang="ts"> import Vue from 'vue'; @@ -58,3 +51,13 @@ export default Vue.extend({ } }); </script> + +<style lang="stylus" scoped> +.mk-images + display grid + grid-gap 4px + height 256px + + @media (max-width 500px) + height 192px +</style> diff --git a/src/web/app/desktop/views/components/images-image.vue b/src/web/app/desktop/views/components/images-image.vue index 5ef8ffcda..b29428ac3 100644 --- a/src/web/app/desktop/views/components/images-image.vue +++ b/src/web/app/desktop/views/components/images-image.vue @@ -1,11 +1,14 @@ <template> -<a class="mk-images-image" - :href="image.url" - @mousemove="onMousemove" - @mouseleave="onMouseleave" - @click.prevent="onClick" - :style="style" - :title="image.name"></a> +<div> + <a class="mk-images-image" + :href="image.url" + @mousemove="onMousemove" + @mouseleave="onMouseleave" + @click.prevent="onClick" + :style="style" + :title="image.name" + ></a> +</div> </template> <script lang="ts"> @@ -50,7 +53,6 @@ export default Vue.extend({ <style lang="stylus" scoped> .mk-images-image - display block overflow hidden border-radius 4px diff --git a/src/web/app/mobile/tags/images.tag b/src/web/app/mobile/tags/images.tag deleted file mode 100644 index 7d95d6de2..000000000 --- a/src/web/app/mobile/tags/images.tag +++ /dev/null @@ -1,82 +0,0 @@ -<mk-images> - <template each={ image in images }> - <mk-images-image image={ image }/> - </template> - <style lang="stylus" scoped> - :scope - display grid - grid-gap 4px - height 256px - - @media (max-width 500px) - height 192px - </style> - <script lang="typescript"> - this.images = this.opts.images; - - this.on('mount', () => { - if (this.images.length == 1) { - this.root.style.gridTemplateRows = '1fr'; - - this.tags['mk-images-image'].root.style.gridColumn = '1 / 2'; - this.tags['mk-images-image'].root.style.gridRow = '1 / 2'; - } else if (this.images.length == 2) { - this.root.style.gridTemplateColumns = '1fr 1fr'; - this.root.style.gridTemplateRows = '1fr'; - - this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2'; - this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2'; - this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3'; - this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2'; - } else if (this.images.length == 3) { - this.root.style.gridTemplateColumns = '1fr 0.5fr'; - this.root.style.gridTemplateRows = '1fr 1fr'; - - this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2'; - this.tags['mk-images-image'][0].root.style.gridRow = '1 / 3'; - this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3'; - this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2'; - this.tags['mk-images-image'][2].root.style.gridColumn = '2 / 3'; - this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3'; - } else if (this.images.length == 4) { - this.root.style.gridTemplateColumns = '1fr 1fr'; - this.root.style.gridTemplateRows = '1fr 1fr'; - - this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2'; - this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2'; - this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3'; - this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2'; - this.tags['mk-images-image'][2].root.style.gridColumn = '1 / 2'; - this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3'; - this.tags['mk-images-image'][3].root.style.gridColumn = '2 / 3'; - this.tags['mk-images-image'][3].root.style.gridRow = '2 / 3'; - } - }); - </script> -</mk-images> - -<mk-images-image> - <a ref="view" href={ image.url } target="_blank" style={ styles } title={ image.name }></a> - <style lang="stylus" scoped> - :scope - display block - overflow hidden - border-radius 4px - - > a - display block - overflow hidden - width 100% - height 100% - background-position center - background-size cover - - </style> - <script lang="typescript"> - this.image = this.opts.image; - this.styles = { - 'background-color': this.image.properties.average_color ? `rgb(${this.image.properties.average_color.join(',')})` : 'transparent', - 'background-image': `url(${this.image.url}?thumbnail&size=512)` - }; - </script> -</mk-images-image> diff --git a/src/web/app/mobile/views/friends-maker.vue b/src/web/app/mobile/views/components/friends-maker.vue similarity index 100% rename from src/web/app/mobile/views/friends-maker.vue rename to src/web/app/mobile/views/components/friends-maker.vue diff --git a/src/web/app/mobile/views/components/images-image.vue b/src/web/app/mobile/views/components/images-image.vue new file mode 100644 index 000000000..e89923492 --- /dev/null +++ b/src/web/app/mobile/views/components/images-image.vue @@ -0,0 +1,37 @@ +<template> +<div> + <a class="mk-images-image" :href="image.url" target="_blank" :style="style" :title="image.name"></a> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + props: ['image'], + computed: { + style(): any { + return { + 'background-color': this.image.properties.average_color ? `rgb(${this.image.properties.average_color.join(',')})` : 'transparent', + 'background-image': `url(${this.image.url}?thumbnail&size=512)` + }; + } + } +}); +</script> + +<style lang="stylus" scoped> +.mk-images-image + display block + overflow hidden + border-radius 4px + + > a + display block + overflow hidden + width 100% + height 100% + background-position center + background-size cover + +</style> diff --git a/src/web/app/mobile/views/post-form.vue b/src/web/app/mobile/views/components/post-form.vue similarity index 100% rename from src/web/app/mobile/views/post-form.vue rename to src/web/app/mobile/views/components/post-form.vue diff --git a/src/web/app/mobile/views/post-preview.vue b/src/web/app/mobile/views/components/post-preview.vue similarity index 100% rename from src/web/app/mobile/views/post-preview.vue rename to src/web/app/mobile/views/components/post-preview.vue diff --git a/src/web/app/mobile/views/posts-post-sub.vue b/src/web/app/mobile/views/components/posts-post-sub.vue similarity index 100% rename from src/web/app/mobile/views/posts-post-sub.vue rename to src/web/app/mobile/views/components/posts-post-sub.vue diff --git a/src/web/app/mobile/views/posts-post.vue b/src/web/app/mobile/views/components/posts-post.vue similarity index 100% rename from src/web/app/mobile/views/posts-post.vue rename to src/web/app/mobile/views/components/posts-post.vue diff --git a/src/web/app/mobile/views/posts.vue b/src/web/app/mobile/views/components/posts.vue similarity index 100% rename from src/web/app/mobile/views/posts.vue rename to src/web/app/mobile/views/components/posts.vue diff --git a/src/web/app/mobile/views/sub-post-content.vue b/src/web/app/mobile/views/components/sub-post-content.vue similarity index 100% rename from src/web/app/mobile/views/sub-post-content.vue rename to src/web/app/mobile/views/components/sub-post-content.vue diff --git a/src/web/app/mobile/views/timeline.vue b/src/web/app/mobile/views/components/timeline.vue similarity index 100% rename from src/web/app/mobile/views/timeline.vue rename to src/web/app/mobile/views/components/timeline.vue diff --git a/src/web/app/mobile/views/ui-header.vue b/src/web/app/mobile/views/components/ui-header.vue similarity index 100% rename from src/web/app/mobile/views/ui-header.vue rename to src/web/app/mobile/views/components/ui-header.vue diff --git a/src/web/app/mobile/views/ui-nav.vue b/src/web/app/mobile/views/components/ui-nav.vue similarity index 100% rename from src/web/app/mobile/views/ui-nav.vue rename to src/web/app/mobile/views/components/ui-nav.vue diff --git a/src/web/app/mobile/views/ui.vue b/src/web/app/mobile/views/components/ui.vue similarity index 100% rename from src/web/app/mobile/views/ui.vue rename to src/web/app/mobile/views/components/ui.vue diff --git a/src/web/app/mobile/views/user-card.vue b/src/web/app/mobile/views/components/user-card.vue similarity index 100% rename from src/web/app/mobile/views/user-card.vue rename to src/web/app/mobile/views/components/user-card.vue