SWREI/switched
0
0
Fork 0
Code

回転寿司

Browse Source
This commit is contained in:
Acid Chicken (硫酸鶏) 2018-07-21 01:21:27 +09:00
parent 29b1aa0d9b
commit f13bef4ac8
2 changed files with 93 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/client/app/desktop/views/components/post-form.vue
View File

@ -11,7 +11,7 @@
<a @click="addVisibleUser">+ユーザーを追加</a> <a @click="addVisibleUser">+ユーザーを追加</a>
</div> </div>
<div class="hashtags" v-if="recentHashtags.length > 0"> <div class="hashtags" v-if="recentHashtags.length > 0">
<a v-for="tag in recentHashtags" @click="addTag(tag)">#{{ tag }}</a> <a class="hashtag" v-for="tag in recentHashtags" @click="addTag(tag)">%fa:hashtag%{{ tag }}</a>
</div> </div>
<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)"> <input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
<textarea :class="{ with: (files.length != 0 || poll) }" <textarea :class="{ with: (files.length != 0 || poll) }"
@ -184,6 +184,22 @@ export default Vue.extend({
} }
this.$nextTick(() => this.watch()); this.$nextTick(() => this.watch());
const hashtags = [...document.getElementsByClassName('hashtag')];
const hashtagsContainer = hashtags.parentElement;
let offsetX = 0
const update = () => {
if (hashtags[0].getBoundingClientRect().right <= hashtagsContainer.getBoundingClientRect().left) {
hashtags.push(hashtags.shift());
offsetX = 0;
hashtags.map(x => x.style.transform = 'translateX(0)');
} else {
offsetX--;
hashtags.map(x => x.style.transform = `translateX(${offsetX}px)`);
}
requestAnimationFrame(update);
};
update()
}); });
}, },
@ -494,8 +510,38 @@ root(isDark)
color isDark ? #fff : #666 color isDark ? #fff : #666
> .hashtags > .hashtags
margin 0 -16px 8px
overflow-x hidden
white-space nowrap
> * > *
margin-right 8px background $theme-color
border-radius: 0 4px 4px 0
color isDark ? #282c37 : #fff8f6
margin-left 28px
white-space nowrap
&:hover
text-decoration none
background darken($theme-color, 10%)
&::before
background inherit
border-radius 4px 0
content ''
display inline-block
height 17.677669529663688110021109052621225982120898442212px
position absolute
right 100%
top 50%
transform translateY(-50%) translateX(50%) rotate(-45deg)
width 17.677669529663688110021109052621225982120898442212px
&::after
background isDark ? #282c37 : #fff8f6
border-radius 50%
content ''
height 4px
left -6.25px
position absolute
top 10px
width 4px
> .medias > .medias
margin 0 margin 0

49
src/client/app/mobile/views/components/post-form.vue
View File

@ -40,7 +40,7 @@
</div> </div>
</div> </div>
<div class="hashtags" v-if="recentHashtags.length > 0"> <div class="hashtags" v-if="recentHashtags.length > 0">
<a v-for="tag in recentHashtags" @click="addTag(tag)">#{{ tag }}</a> <a class="hashtag" v-for="tag in recentHashtags" @click="addTag(tag)">%fa:hashtag%{{ tag }}</a>
</div> </div>
</div> </div>
</template> </template>
@ -165,6 +165,22 @@ export default Vue.extend({
this.$nextTick(() => { this.$nextTick(() => {
this.focus(); this.focus();
}); });
const hashtags = [...document.getElementsByClassName('hashtag')];
const hashtagsContainer = hashtags.parentElement;
let offsetX = 0
const update = () => {
if (hashtags[0].getBoundingClientRect().right <= hashtagsContainer.getBoundingClientRect().left) {
hashtags.push(hashtags.shift());
offsetX = 0;
hashtags.map(x => x.style.transform = 'translateX(0)');
} else {
offsetX -= .25;
hashtags.map(x => x.style.transform = `translateX(${offsetX}px)`);
}
requestAnimationFrame(update);
};
update()
}, },
methods: { methods: {
@ -465,10 +481,35 @@ root(isDark)
box-shadow none box-shadow none
> .hashtags > .hashtags
margin 8px margin 0 -16px 8px
overflow-x hidden
white-space nowrap
> * > *
margin-right 8px background $theme-color
border-radius: 0 4px 4px 0
color isDark ? #282c37 : #fff8f6
margin-left 28px
white-space nowrap
&::before
background inherit
border-radius 4px 0
content ''
display inline-block
height 17.677669529663688110021109052621225982120898442212px
position absolute
right 100%
top 50%
transform translateY(-50%) translateX(50%) rotate(-45deg)
width 17.677669529663688110021109052621225982120898442212px
&::after
background isDark ? #282c37 : #fff8f6
border-radius 50%
content ''
height 4px
left -6.25px
position absolute
top 10px
width 4px
.mk-post-form[data-darkmode] .mk-post-form[data-darkmode]
root(true) root(true)