From a9ce3a2f88fc92044f25dcf4ec41be2d7bd6cc46 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Mon, 5 Mar 2018 11:33:44 +0900 Subject: [PATCH] :v: --- .../desktop/views/components/posts.post.vue | 88 +++++++++---------- src/web/app/mobile/views/components/post.vue | 77 ++++++++-------- 2 files changed, 82 insertions(+), 83 deletions(-) diff --git a/src/web/app/desktop/views/components/posts.post.vue b/src/web/app/desktop/views/components/posts.post.vue index 93af3d54dc..667263a022 100644 --- a/src/web/app/desktop/views/components/posts.post.vue +++ b/src/web/app/desktop/views/components/posts.post.vue @@ -33,26 +33,26 @@ </div> </header> <div class="body"> - <div class="text" ref="text"> - <p class="channel" v-if="p.channel"> - <a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>: - </p> + <p class="channel" v-if="p.channel"> + <a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>: + </p> + <div class="text"> <a class="reply" v-if="p.reply">%fa:reply%</a> <mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/> - <div class="tags" v-if="p.tags && p.tags.length > 0"> - <router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link> - </div> <a class="rp" v-if="p.repost">RP:</a> - <p class="location" v-if="p.geo">%fa:map-marker-alt% 位置情報</p> - <mk-url-preview v-for="url in urls" :url="url" :key="url"/> </div> <div class="media" v-if="p.media"> <mk-images :images="p.media"/> </div> <mk-poll v-if="p.poll" :post="p" ref="pollViewer"/> + <div class="tags" v-if="p.tags && p.tags.length > 0"> + <router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link> + </div> + <a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.latitude},${p.geo.longitude}`" target="_blank">%fa:map-marker-alt% 位置情報</a> <div class="repost" v-if="p.repost">%fa:quote-right -flip-h% <mk-post-preview class="repost" :post="p.repost"/> </div> + <mk-url-preview v-for="url in urls" :url="url" :key="url"/> </div> <footer> <mk-reactions-viewer :post="p" ref="reactionsViewer"/> @@ -433,12 +433,6 @@ export default Vue.extend({ color #aaa border-left solid 3px #eee - .mk-url-preview - margin-top 8px - - > .channel - margin 0 - > .reply margin-right 8px color #717171 @@ -448,39 +442,45 @@ export default Vue.extend({ font-style oblique color #a0bf46 - > .location - margin 4px 0 - font-size 12px - color #ccc + > .location + margin 4px 0 + font-size 12px + color #ccc - > .tags - margin 4px 0 0 0 + > .tags + margin 4px 0 0 0 - > * - display inline-block - margin 0 8px 0 0 - padding 2px 8px 2px 16px - font-size 90% - color #8d969e - background #edf0f3 - border-radius 4px + > * + display inline-block + margin 0 8px 0 0 + padding 2px 8px 2px 16px + font-size 90% + color #8d969e + background #edf0f3 + border-radius 4px - &:before - content "" - display block - position absolute - top 0 - bottom 0 - left 4px - width 8px - height 8px - margin auto 0 - background #fff - border-radius 100% + &:before + content "" + display block + position absolute + top 0 + bottom 0 + left 4px + width 8px + height 8px + margin auto 0 + background #fff + border-radius 100% - &:hover - text-decoration none - background #e2e7ec + &:hover + text-decoration none + background #e2e7ec + + .mk-url-preview + margin-top 8px + + > .channel + margin 0 > .mk-poll font-size 80% diff --git a/src/web/app/mobile/views/components/post.vue b/src/web/app/mobile/views/components/post.vue index bd8179dd2b..5ddaa605ba 100644 --- a/src/web/app/mobile/views/components/post.vue +++ b/src/web/app/mobile/views/components/post.vue @@ -32,23 +32,23 @@ </div> </header> <div class="body"> - <div class="text" ref="text"> - <p class="channel" v-if="p.channel != null"><a target="_blank">{{ p.channel.title }}</a>:</p> + <p class="channel" v-if="p.channel != null"><a target="_blank">{{ p.channel.title }}</a>:</p> + <div class="text"> <a class="reply" v-if="p.reply"> %fa:reply% </a> <mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/> - <div class="tags" v-if="p.tags && p.tags.length > 0"> - <router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link> - </div> - <mk-url-preview v-for="url in urls" :url="url" :key="url"/> <a class="rp" v-if="p.repost != null">RP:</a> </div> <div class="media" v-if="p.media"> <mk-images :images="p.media"/> </div> <mk-poll v-if="p.poll" :post="p" ref="pollViewer"/> - <p class="location" v-if="p.geo">%fa:map-marker-alt% 位置情報</p> + <div class="tags" v-if="p.tags && p.tags.length > 0"> + <router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link> + </div> + <mk-url-preview v-for="url in urls" :url="url" :key="url"/> + <a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.latitude},${p.geo.longitude}`" target="_blank">%fa:map-marker-alt% 位置情報</a> <span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span> <div class="repost" v-if="p.repost">%fa:quote-right -flip-h% <mk-post-preview class="repost" :post="p.repost"/> @@ -356,7 +356,6 @@ export default Vue.extend({ > .body > .text - cursor default display block margin 0 padding 0 @@ -370,12 +369,6 @@ export default Vue.extend({ color #aaa border-left solid 3px #eee - .mk-url-preview - margin-top 8px - - > .channel - margin 0 - > .reply margin-right 8px color #717171 @@ -385,31 +378,6 @@ export default Vue.extend({ font-style oblique color #a0bf46 - > .tags - margin 4px 0 0 0 - - > * - display inline-block - margin 0 8px 0 0 - padding 2px 8px 2px 16px - font-size 90% - color #8d969e - background #edf0f3 - border-radius 4px - - &:before - content "" - display block - position absolute - top 0 - bottom 0 - left 4px - width 8px - height 8px - margin auto 0 - background #fff - border-radius 100% - [data-is-me]:after content "you" padding 0 4px @@ -419,6 +387,37 @@ export default Vue.extend({ background $theme-color border-radius 4px + .mk-url-preview + margin-top 8px + + > .channel + margin 0 + + > .tags + margin 4px 0 0 0 + + > * + display inline-block + margin 0 8px 0 0 + padding 2px 8px 2px 16px + font-size 90% + color #8d969e + background #edf0f3 + border-radius 4px + + &:before + content "" + display block + position absolute + top 0 + bottom 0 + left 4px + width 8px + height 8px + margin auto 0 + background #fff + border-radius 100% + > .media > img display block