doohoyi/distribusi-foh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

아카이브 리스트 모바일 대응

Browse source
This commit is contained in:
Hyunchul Kim 2020-11-28 02:49:20 +09:00
parent 18a9565b1c
commit 94f4434991
3 changed files with 114 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
test_data/fragment.html
View file

@ -13,6 +13,9 @@
</head> </head>
<body> <body>
<div> <div>
<div id="menu"> <div id="menu">
<div id="logo_wrapper" class="svg_wrapper"> <div id="logo_wrapper" class="svg_wrapper">
<a href="/index.html"> <a href="/index.html">
@ -43,20 +46,20 @@
<div id="wrapper_author"> <div id="wrapper_author">
<div id="fragment_wrapper"> <div id="fragment_wrapper">
</div> </div>
<div id="introduction"> <div id="introduction">
</div> </div>
</div>
<div id="archive_exit" style="display:none;"></div>
<div id="archive"> <div id="archive">
<button id="archive_button">ARCHIVE <button id="archive_button">ARCHIVE
<img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
</button> </button>
<div id="archive_list"> <div id="archive_list">
<a href="#">조각#1234</a> <a href="#">조각#1234</a>
</div> </div>
</div> </div>
</div>
<div id="contents"> <div id="contents">
<div id="frags"> <div id="frags">
@ -68,6 +71,11 @@
<script src="/src/scripts/updateIntroduction.js"></script> <script src="/src/scripts/updateIntroduction.js"></script>
<script src="/src/scripts/updateArchive.js"></script> <script src="/src/scripts/updateArchive.js"></script>
<script src="/src/scripts/hashEvent.js"></script> <script src="/src/scripts/hashEvent.js"></script>
<script src="/src/scripts/mobileArchiveEvent.js"></script>
</script>
</body> </body>
</html> </html>

40
test_data/src/scripts/mobileArchiveEvent.js Normal file
View file

@ -0,0 +1,40 @@
let showingList = false;
function switchList() {
if (showingList === true){
document.querySelector('#archive_exit').style.display = "none";
document.querySelector('#archive_list').style.display = "none";
showingList = false;
}else {
document.querySelector('#archive_exit').style.display = "block";
document.querySelector('#archive_list').style.display = "block";
showingList = true;
}
}
document.querySelector('#archive_exit').onclick = () => {
if (window.innerWidth < 780){
document.querySelector('#archive_exit').style.display = "none";
document.querySelector('#archive_list').style.display = "none";
showingList = false;
}
}
document.querySelector('#archive_button').onclick = () => {
if (window.innerWidth < 780){
switchList();
}
}
$('#archive').hover = () => {
if (window.innerWidth < 780){
switchList();
}
}
document.querySelector("body").onresize = ()=>{
if (window.innerWidth > 780) {
document.querySelector('#archive_exit').style.display = "none";
document.querySelector('#archive_list').style.display = "";
}
};

66
test_data/src/style/common.css
View file

@ -24,6 +24,7 @@
/***** common *****/ /***** common *****/
* { margin: 0; font-family: Arial, Helvetica, "돋움", sans-serif; word-break: normal; } * { margin: 0; font-family: Arial, Helvetica, "돋움", sans-serif; word-break: normal; }
a, a:hover, a:visited {color:black;} a, a:hover, a:visited {color:black;}
@ -54,7 +55,7 @@
} }
.focus { .focus {
animation: rainbowLinkText 0.5s; animation: rainbowLinkText 3s;
} }
a:hover text, a:focus text, a:active text { animation-duration: 1s; animation-name: rainbowLink; animation-iteration-count: infinite; } a:hover text, a:focus text, a:active text { animation-duration: 1s; animation-name: rainbowLink; animation-iteration-count: infinite; }
@ -156,19 +157,34 @@
} }
/* FRAGMENT ==> AUTHOR ==> ARCHIVE DROP-DOWN */ /* FRAGMENT ==> AUTHOR ==> ARCHIVE DROP-DOWN */
div#archive {
margin:10px; div#archive_exit {
top:0px;
background-color: rgba(123, 60, 99, 0.9);
z-index: 99;
position: fixed;
width: 100%;
height: 100%;
}
div#archive {
margin:0px;
position: fixed;
bottom: 0px;
width:100%;
z-index: 100;
} }
div#archive:hover #archive_list{display: block;}
div#archive_list { div#archive_list {
display: none; display: none;
position: absolute; position: absolute;
max-height:335px; max-height:335px;
width:200px; width:100%;
overflow-y: scroll; overflow-y: scroll;
border: 1px solid; border: 1px solid;
z-index: 10; bottom: 40px;
/* z-index: 10; */
background:#fff;
} }
div#archive_list a { div#archive_list a {
@ -180,10 +196,10 @@
div#archive_list a:nth-child(1) {border-top: none;} div#archive_list a:nth-child(1) {border-top: none;}
button#archive_button{ button#archive_button{
width:100px; width:100%;
background:#fff; background:#fff;
border:1px solid; border:1px solid;
height: 30px; height: 40px;
} }
img#icon_archive_more {width: 16px;} img#icon_archive_more {width: 16px;}
@ -290,11 +306,43 @@
margin:10px; margin:10px;
} }
div#fragments_wrapper > img {
width: fit-content;
}
div#introduction { div#introduction {
margin:10px; margin:10px;
} }
/*archive_list was here*/ /* FRAGMENT ==> AUTHOR ==> ARCHIVE DROP-DOWN */
div#archive {
width:140px;
top: 100px;
right: 100px;
}
div#archive:hover #archive_list{
display: block;
}
div#archive_list {
bottom:auto;
top:30px;
width:300px;
right:0px;
/* z-index: 10; */
}
button#archive_button{
width:100%;
background:#fff;
border:1px solid;
height: 30px;
}
/* img#icon_archive_more {width: 16px;} */
/* FRAGMENT ==> CONTENTS */ /* FRAGMENT ==> CONTENTS */
div#frags{ div#frags{
position: absolute; position: absolute;