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

Jump to bottom

Added Dropdown option , FIXES #367 #368

Merged
merged 3 commits into from
Apr 9, 2023
Merged

Added Dropdown option , FIXES #367 #368

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7eeb435
Added DropDown option
Cshiva773 Apr 8, 2023
464395e
Changed styling of arrow
Cshiva773 Apr 8, 2023
8bf153f
Changed hover state to onClick state
Cshiva773 Apr 9, 2023
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
169 changes: 127 additions & 42 deletions credits/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,70 +65,155 @@ <h2>Project Contributors (People that helped make this website a success :)</h2>

<!-- ALL-CONTRIBUTORS-LIST:END -->
</center>
<a href="https://github.com/KendallDoesCoding"><h1>KendallDoesCoding</h1></a>
<h3> Project Founder, Owner </h3>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=KendallDoesCoding">Commits by KendallDoesCoding</h4></a>
<a href="https://github.com/TechStudent11"><h1>TechStudent10</h1></a>
<h3> Contributed majorly in the project </h3>
<div class="techstudent10-work">
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/6">Made it so that, it changes link automatically updates embed of the respective song onto page when tapped song (Added in old releases).</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/24">Made it so that, it ends song once the song user has chosen ends/Doesn't go to the next song in the playlist after (Added in old releases).</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/66">Made it so that, it only shows the embed of the song, after the user has clicked a song (Added in old releases).</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/78">Made it so that, it doesn't show the iframe of the embed, it straight away starts the song.</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/83">Make website more responsive (Defunked after the PR was made, fixed it a bit, but there is still a small issue, bug report has been made in the repo).</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/207">Worked on the JS part for the "Play Random Song" button in You May Like directory.</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/291">Worked on the hyperlinks in JS for the "You May Like" directory for the "Pagination" update.</h3></a>

<div class="dropdown">
<a href="https://github.com/KendallDoesCoding"><h1>KendallDoesCoding<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
Copy link

Choose a reason for hiding this comment

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

Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

<div class="dropdown-content">
<h3> Project Founder, Owner </h3>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=KendallDoesCoding">Commits by KendallDoesCoding</h4></a>
</div>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=TechStudent11">Commits by TechStudent10</h4></a>
<a href="https://github.com/aliraza944"><h1>Ali Raza</h1></a>
<h3> Contributed majorly in the project </h3>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/87">Made it so that, the github repo icon if tapped, will the project repo in a new browser window.</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/88">Move the lyrics from the HTML file to lyrics.js in the lyrics directory.</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/96">Added darkmode to main and lyrics directory/page.</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/107">Added a Christmas Day message to display to users on the site on Christmas Day.</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/172">Apply darkmode to other projects directory/page.</h3></a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=aliraza944">Commits by Ali Raza</h4></a>
<a href="https://github.com/JeffBucherDev"><h1>JeffBucherDev</h1></a>
<h3> One-time Contributor </h3>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/218">Fixed CSS problem in "Other Projects" directory.</h3></a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=JeffBucherDev">Commits by JeffBucherDev</h4></a>
<a href="https://github.com/Bibhavshah"><h1>Bibhav Shah</h1></a>
</div>
</br>


<div class="dropdown">
<a href="https://github.com/TechStudent11"><h1>TechStudent10<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
Copy link

Choose a reason for hiding this comment

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

Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

<div class="dropdown-content">
<h3> Contributed majorly in the project </h3>
<div class="techstudent10-work">
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/6">Made it so that, it changes link automatically updates embed of the respective song onto page when tapped song (Added in old releases).</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/24">Made it so that, it ends song once the song user has chosen ends/Doesn't go to the next song in the playlist after (Added in old releases).</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/66">Made it so that, it only shows the embed of the song, after the user has clicked a song (Added in old releases).</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/78">Made it so that, it doesn't show the iframe of the embed, it straight away starts the song.</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/83">Make website more responsive (Defunked after the PR was made, fixed it a bit, but there is still a small issue, bug report has been made in the repo).</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/207">Worked on the JS part for the "Play Random Song" button in You May Like directory.</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/291">Worked on the hyperlinks in JS for the "You May Like" directory for the "Pagination" update.</h3></a>
</div>

<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=TechStudent11">Commits by TechStudent10</h4></a>
</div>
</div>
</br>


<div class="dropdown">
<a href="https://github.com/aliraza944"><h1>Ali Raza<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
Copy link

Choose a reason for hiding this comment

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

Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

<div class="dropdown-content">
<h3> Contributed majorly in the project </h3>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/87">Made it so that, the github repo icon if tapped, will the project repo in a new browser window.</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/88">Move the lyrics from the HTML file to lyrics.js in the lyrics directory.</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/96">Added darkmode to main and lyrics directory/page.</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/107">Added a Christmas Day message to display to users on the site on Christmas Day.</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/172">Apply darkmode to other projects directory/page.</h3></a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=aliraza944">Commits by Ali Raza</h4></a>
</div>
</div>
</br>

<div class="dropdown">
<a href="https://github.com/JeffBucherDev"><h1>JeffBucherDev<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
Copy link

Choose a reason for hiding this comment

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

Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

<div class="dropdown-content">
<h3> One-time Contributor </h3>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/48">Leave space between buttons in main directory.</h3></a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=Bibhavshah">Commits by Bibhav Shah</h4></a>
<a href="https://github.com/kira272921"><h1>Kira</h1></a>
<h3> One-time Contributor</h3>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/218">Fixed CSS problem in "Other Projects" directory.</h3></a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=JeffBucherDev">Commits by JeffBucherDev</h4></a>
</div>
</div>
</br>


<div class="dropdown">
<a href="https://github.com/Bibhavshah"><h1>Bibhav Shah<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
Copy link

Choose a reason for hiding this comment

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

Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

<div class="dropdown-content">
<h3> One-time Contributor </h3>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/48">Leave space between buttons in main directory.</h3></a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=Bibhavshah">Commits by Bibhav Shah</h4></a>
</div>
</div>
</br>

<div class="dropdown">
<a href="https://github.com/kira272921"><h1>Kira<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
Copy link

Choose a reason for hiding this comment

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

Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

<div class="dropdown-content">
<h3> One-time Contributor</h3>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/219">Helped setup AllContributors bot to the repo and taught KendallDoesCoding (Founder, Owner of the project) how to use the bot.</h3></a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=Kira">Commits by Kira</h4></a>
<a href="https://github.com/divyakelaskar"><h1>Divya Kelaskar</h1></a>
</div>
</div>
</br>

<div class="dropdown">
<a href="https://github.com/divyakelaskar"><h1>Divya Kelaskar<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
Copy link

Choose a reason for hiding this comment

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

Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

<div class="dropdown-content">
<h3> One-time Contributor</h3>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/246">Added PR template to project GitHub repo.</h3></a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=divyakelaskar">Commits by Divya Kelaskar</h4></a>
</div>
</div>
<a href="https://github.com/samyberkane04"><h1>Samy Berkane</h1></a>
<h3> One-time Contributor</h3>
</br>

<div class="dropdown">
<a href="https://github.com/samyberkane04"><h1>Samy Berkane<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
Copy link

Choose a reason for hiding this comment

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

Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

<div class="dropdown-content">
<h3> One-time Contributor</h3>
<h3>Helped with <a href="https://github.com/KendallDoesCoding/mogul-christmas/issues/259">Background not displaying on phone/small screen size.</a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=samyberkane04">Commits by Samy Berkane</h4></a>
<a href="https://github.com/Michael-Obele"><h1>Michael Obele</h1></a>
</div>
</div>
</br>

<div class="dropdown">
<a href="https://github.com/Michael-Obele"><h1>Michael Obele<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
Copy link

Choose a reason for hiding this comment

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

Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

<div class="dropdown-content">
<h3> One-time Contributor</h3>
<h3>Helped to <a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/296"> Improve README.md</a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=Michael-Obele">Commits by Micheal Obele</h4></a>
<a href="https://github.com/Weave-Trix"><h1>Weave-Trix</h1></a>

</div>
</div>
</br>

<div class="dropdown">
<a href="https://github.com/Weave-Trix"><h1>Weave-Trix<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
Copy link

Choose a reason for hiding this comment

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

Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

<div class="dropdown-content">
<h3> One-time Contributor</h3>
<h3>Helped with <a href="https://github.com/KendallDoesCoding/mogul-christmas/issues/276">[FEATURE REUQEST] Play random song button in main directory.</a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=Weave-Trix">Commits by Weave-Trix</h4></a>
<a href="https://github.com/fk00750"><h1>F.K</h1></a>
<h3> One-time Contributor</h3>
</div>
</div>
</br>

<div class="dropdown">
<a href="https://github.com/fk00750"><h1>F.K<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
Copy link

Choose a reason for hiding this comment

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

Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

<div class="dropdown-content">
<h3> One-time Contributor</h3>
<h3>Helped with <a href="https://github.com/KendallDoesCoding/mogul-christmas/issues/103">[Javascript] Format lyrics proper in lyrics directory songs.</a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=fk00750">Commits by F.K</h4></a>
<a href="https://github.com/ArhyaSaha"><h1>Arhya Saha</h1></a>
<h3> One-time Contributor</h3>
</div>
</div>
</br>


<div class="dropdown">
<a href="https://github.com/ArhyaSaha"><h1>Arhya Saha<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
Copy link

Choose a reason for hiding this comment

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

Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

<div class="dropdown-content">
<h3> One-time Contributor</h3>
<h3>Helped with <a href="https://github.com/KendallDoesCoding/mogul-christmas/issues/302">Convert all pics in the Photo Gallery to .jpg</a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=ArhyaSaha">Commits by Arhya Saha</h4></a>
<a href="https://github.com/frazie"><h1>Frazier Odhiambo</h1></a>
<h3> One-time Contributor</h3>
</div>
</div>
</br>

<div class="dropdown">
<a href="https://github.com/frazie"><h1>Frazier Odhiambo<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
Copy link

Choose a reason for hiding this comment

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

Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

<div class="dropdown-content">
<h3> One-time Contributor</h3>
<h3>Helped with <a href="https://github.com/KendallDoesCoding/mogul-christmas/issues/80">Make site responsive and make it so that if screen size is small the button to toggle darkmode becomes small too.</a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=frazie">Commits by Frzie Odhiambo</h4></a>
</div>
</div>
</br>


</div>
<div class="singers">
<h2>Singers/Bands/YouTubers whose songs/videos are in the "Songs You May Like" directory.</h2>
Expand Down
49 changes: 49 additions & 0 deletions credits/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,52 @@ h2 {
font-family: "Beau Rivage", cursive;
font-size: 9mm;
}
.dropbtn {

padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {

}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-left: 10px;
}