Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ヒントアイコンの導入 #47 #83

Merged
merged 5 commits into from
Jan 13, 2020
Merged

ヒントアイコンの導入 #47 #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b1fc251
feat: Font Awesomeの導入
yume-yu Jan 11, 2020
0243eb5
feat: tootID/URLのヘルプ表示をiconのホバーに変更
yume-yu Jan 12, 2020
83e4e87
fix: ボタン押下時にブラ付き青枠が出ていたのを削除
yume-yu Jan 12, 2020
5acc3f4
fix: @media部分のクラス名を修正
yume-yu Jan 13, 2020
0d838bf
fix: firefoxのプレフィックス追加と文字列折返し抑止
yume-yu Jan 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 31 additions & 12 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,11 @@ div.area>div input:last-child {
#copylink {
margin-left: 10px;
}

input[type=button]:focus {
outline:0;
}

.area input[type="button"] {
font-size: 15px;
padding: .5em;
Expand Down Expand Up @@ -203,22 +208,44 @@ label {
padding-bottom: 15px;
color: #000;
line-height: 1;
position: relative;
}
/* end */

label>i{
color: darkgray;
margin-left: 0.25rem;
}

.error {
label>i:hover{
color: gray;
margin-left: 0.25rem;
}
.hint {
display: none;
font-size: .8rem;
position: absolute;
width: fit-content;
width: -moz-fit-content;
word-break: keep-all;
bottom: 100%;
right: 0;
padding: .5em 1em .4em;
border-radius: 5px;
color: transparent;
}

i:hover .hint {
display: block;
animation-name: appear;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}

/* end */



@keyframes appear {
from {
background-color: transparent;
Expand All @@ -231,28 +258,20 @@ label {
color: #348304;
}
}

input:hover+.error {
display: inline;
animation-name: appear;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}
@media screen and (max-width: 899px) {
/* width for mobile view */
.area{width: 90vw; height: auto;}
#matomain {
width: 100%;
}
.error {
.hint {
font-size: .6rem;
}
}

@media screen and (max-width: 669px) {
/* width for mobile view */
.error {
.hint {
right: -8vw ;
font-size: 2vw;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

文字が小さくなるのはこれのせいか。

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これですね。改行が発生するよりはfont-sizeで調整して埋めようという考えです

}
Expand Down
3 changes: 2 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<script type="module" src="js/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/ja.js"></script>
<script src="https://kit.fontawesome.com/7c338f1914.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="container">
Expand All @@ -26,7 +27,7 @@ <h1><a href="./">mastogetter</a></h1>
</div>
<div id="domainid">
<p><label for="instance">インスタンス名</label><input type="text" id="instance" placeholder="https://qiitadon.com"></p>
<p><label for="toot-id">トゥートID or URL</label><input type="text" id="toot-id" placeholder="カーソルをあわせてヒントを表示"><span class="error">例)<br>012345678901234567<br>https://hogedon.com/web/status/012345678901234567<br>https://hogedon.com/@userid/012345678901234567</span></p>
<p><label for="toot-id">トゥートID or URL<i class="far fa-question-circle"><span class="hint">例)<br>012345678901234567<br>https://hogedon.com/web/status/012345678901234567<br>https://hogedon.com/@userid/012345678901234567</span></i></label><input type="text" id="toot-id" placeholder="012345678901234567"></p>
<input type="button" value="ID or URLからプレビュー" id="showPreview">
</div>
<div id="card-preview">
Expand Down