아카이브 리스트 모바일 대응
This commit is contained in:
Hyunchul Kim
parent
18a9565b1c
commit
94f4434991
3 changed files with 114 additions and 18 deletions
|
|
@ -13,6 +13,9 @@
|
|||
</head>
|
||||
<body>
|
||||
<div>
|
||||
|
||||
|
||||
|
||||
<div id="menu">
|
||||
<div id="logo_wrapper" class="svg_wrapper">
|
||||
<a href="/index.html">
|
||||
|
|
@ -43,18 +46,18 @@
|
|||
|
||||
<div id="wrapper_author">
|
||||
<div id="fragment_wrapper">
|
||||
|
||||
</div>
|
||||
<div id="introduction">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="archive">
|
||||
<button id="archive_button">ARCHIVE
|
||||
<img id="icon_archive_more" src="src/img/icon_timeline.svg" alt="">
|
||||
</button>
|
||||
<div id="archive_list">
|
||||
<a href="#">조각#1234</a>
|
||||
</div>
|
||||
<div id="archive_exit" style="display:none;"></div>
|
||||
<div id="archive">
|
||||
<button id="archive_button">ARCHIVE
|
||||
<!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
|
||||
</button>
|
||||
<div id="archive_list">
|
||||
<a href="#">조각#1234</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -68,6 +71,11 @@
|
|||
<script src="/src/scripts/updateIntroduction.js"></script>
|
||||
<script src="/src/scripts/updateArchive.js"></script>
|
||||
<script src="/src/scripts/hashEvent.js"></script>
|
||||
<script src="/src/scripts/mobileArchiveEvent.js"></script>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
40
test_data/src/scripts/mobileArchiveEvent.js
Normal file
40
test_data/src/scripts/mobileArchiveEvent.js
Normal 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 = "";
|
||||
}
|
||||
};
|
||||
|
|
@ -19,8 +19,9 @@
|
|||
div.frag {background-color:beige;}
|
||||
div.image {background-color:magenta}
|
||||
div.pdf object {background-color:mediumaquamarine}
|
||||
div.x-empty {background-color:mediumseagreen}
|
||||
div.x-empty {background-color:mediumseagreen}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -54,7 +55,7 @@
|
|||
}
|
||||
|
||||
.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; }
|
||||
|
|
@ -156,19 +157,34 @@
|
|||
}
|
||||
|
||||
/* 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 {
|
||||
display: none;
|
||||
position: absolute;
|
||||
max-height:335px;
|
||||
width:200px;
|
||||
width:100%;
|
||||
overflow-y: scroll;
|
||||
border: 1px solid;
|
||||
z-index: 10;
|
||||
bottom: 40px;
|
||||
/* z-index: 10; */
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
div#archive_list a {
|
||||
|
|
@ -180,10 +196,10 @@
|
|||
div#archive_list a:nth-child(1) {border-top: none;}
|
||||
|
||||
button#archive_button{
|
||||
width:100px;
|
||||
width:100%;
|
||||
background:#fff;
|
||||
border:1px solid;
|
||||
height: 30px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
img#icon_archive_more {width: 16px;}
|
||||
|
|
@ -290,11 +306,43 @@
|
|||
margin:10px;
|
||||
}
|
||||
|
||||
div#fragments_wrapper > img {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
div#introduction {
|
||||
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 */
|
||||
div#frags{
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Reference in a new issue