Skip to content
New issue

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

#

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

Already on GitHub? # to your account

hooliPopup first commit #261

Merged
merged 17 commits into from
Aug 29, 2022
Merged

hooliPopup first commit #261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
8c7d454
hooliPopup first commit
YuraZagor Aug 22, 2022
00efe35
added a-hrefs to animate popup
YuraZagor Aug 23, 2022
2296c1f
Deleted tabindexes and a-hrefs added
YuraZagor Aug 23, 2022
93a7a05
Merge branch 'hooliPopup' of https://github.com/YuraZagor/frontend-20…
YuraZagor Aug 23, 2022
cb692d0
deleted img folder
YuraZagor Aug 26, 2022
a4db8ab
Merge branch 'kottans:main' into hooliPopup
YuraZagor Aug 26, 2022
3597228
modified icon-sizes, added tab-navigating outline for More-button
YuraZagor Aug 27, 2022
4fc9d1b
Merge branch 'kottans:main' into hooliPopup
YuraZagor Aug 27, 2022
8d9d965
Merge branch 'hooliPopup' into hooliPopup
YuraZagor Aug 27, 2022
a8df5cf
deleted commented css
YuraZagor Aug 27, 2022
0a3e742
corrected the stretch effect of video-icon
YuraZagor Aug 27, 2022
581632b
Changed using img tag in css to selection by class
YuraZagor Aug 27, 2022
16d3ed1
object-fit: cover ==> object-fit: contain;
YuraZagor Aug 27, 2022
9e41577
removed alt-text for icons
YuraZagor Aug 28, 2022
f253c3e
classes corrected and experiments over css
YuraZagor Aug 28, 2022
00ed38f
lesser changes to css while experimenting
YuraZagor Aug 28, 2022
2d651e9
input/label ordered, updated css for rect. offset
YuraZagor Aug 29, 2022
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
62 changes: 62 additions & 0 deletions submissions/YuraZagor/hooliPopup/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>myPopup</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<nav>
<ul class="ul--menu">
<li class="li--menu"><a href="#">Mail</a></li>
<li class="li--menu"><a href="#">Images</a></li>

<li class="li--menu sub-menu" >
<input type="checkbox" id="checkbox-icon" name='checkbox-icon' class='checkbox-icon' alt="popup-checkbox" >
<label id="popup-label" class="popup-label" for='checkbox-icon'> <img src="./popup-icons/popup-button.png" alt="" class="menu--img" > </label>

<section class="outer-popup-container">
<div class="inner-container">
<ul class="popups--container">
<li class="li--popup--item"> <a href="#" class="li--href"><img src="./popup-icons/blogs.png" alt="" class="popup--item"> </a></li>
<li class="li--popup--item"> <a href="#" class="li--href"><img src="./popup-icons/apps.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"> <a href="#" class="li--href"><img src="./popup-icons/calendar.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"> <a href="#" class="li--href"><img src="./popup-icons/chat.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"> <a href="#" class="li--href"><img src="./popup-icons/classroom.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"> <a href="#" class="li--href"><img src="./popup-icons/collection.png" alt="" class="popup--item"></a></li>
</ul>

<input type="checkbox" id='show--all' class='show--all' name='show--all' alt="show-popup-menu-all-together">
<label id="show--all--label" for='show--all' class='show--all--label'> Show All </label>

<ul class="popups--container--all">
<li class="li--popup--item"><a href="#"><img src="./popup-icons/contacts.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"><a href="#"><img src="./popup-icons/documents.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"><a href="#"><img src="./popup-icons/files.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"><a href="#"><img src="./popup-icons/mail.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"><a href="#"><img src="./popup-icons/maps.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"><a href="#"><img src="./popup-icons/mars.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"><a href="#"><img src="./popup-icons/mic.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"><a href="#"><img src="./popup-icons/news.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"><a href="#"><img src="./popup-icons/photos.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"><a href="#"><img src="./popup-icons/promo.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"><a href="#"><img src="./popup-icons/tanslation.png" alt="" class="popup--item"></a></li>
<li class="li--popup--item"><a href="#"><img src="./popup-icons/videos.png" alt="" class="popup--item"></a></li>
</ul>
</div>
</section>
</li>

<li class="li--menu sub-menu" id="bell-label"><a href="#"><img src="./popup-icons/bell.png" alt="bell" class="menu--img"></a></li>
<li class="li--menu"><a href="#">login</a></li>

</ul>

</nav>



</body>
</html>
144 changes: 144 additions & 0 deletions submissions/YuraZagor/hooliPopup/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
* {
box-sizing: border-box;
position: relative;
margin: 0;
padding: 0;
}

.ul--menu, .popups--container, .popups--container--all {
list-style-type: none;
}

.ul--menu {
display:flex;
justify-content: flex-end;
align-items: center;
}

.li--menu {
padding: 10px;
}

.popup--item {
width: 2.5em;
height: 2.4em;
cursor: pointer;
object-fit: contain;
padding: 6px;
user-select: none;
}

.menu--img {
width: 1.1em;
height: auto;
cursor: pointer;
}

.outer-popup-container {
display: none;
position: absolute;
top: 35px;
right: -80px;
width: 12em;
}

.inner-container{
max-height: 250px;
border: 0.5px solid lightcoral;
border-radius: 6px;
justify-items: center;
align-items: center;
scroll-behavior: auto;
overflow-y:scroll;
margin: 10px;
padding: 10px;
}

.popups--container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

.popups--container--all{
display: none;
grid-template-columns: 1fr 1fr 1fr;
}

.show--all {
position: absolute;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.checkbox-icon {
position: absolute;
width: 1px;
height: 1px;
overflow:hidden;
clip: rect(0 0 0 0);
}

.show--all--label{
display: flex;
user-select: none;
width: 100%;
max-width: 40vw;
align-content: center;
justify-content: center;
border: 1px solid lightcoral;
border-radius: 4px;
background-color: antiquewhite;
cursor: pointer;
padding: 5px;
margin: 5px 0;
}

.li--href {
width: 2.1em;
height: 2.1em;
cursor: pointer;
object-fit: contain;
}

.checkbox-icon:checked ~ .outer-popup-container {
display: block;
}

#show--all:checked ~ .popups--container--all {
display: grid;
}

#show--all:checked ~ #show--all--label {
display: none;
}

.popup--item:hover, .li--menu:hover {
background-color: rgb(230, 207, 207);
border-color: #94989b;
transition: 0.3s ease-in-out;
}

.popup--item:active, .li--menu:active {
background-color: #ff9501;
border-color: #94989b;
transition: 0.3s ease-in-out;
}

.popup--item:focus, .li--menu:focus {
background-color: #e0ebf7;
border-color: #9d9ea0;
transition: ease 0.2s;
}

.checkbox-icon:focus + .popup-label,
.show--all:focus + .show--all--label {
outline: 2px solid black !important;
}

@media screen and ( max-width: 620px) {
.inner-container{
margin: 0;
padding: 0;
}
}