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 all commits
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
300 changes: 258 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,286 @@ <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>
<script>
//show and hide dropdown list item on button click
function func() {
var click = document.getElementById("item");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/KendallDoesCoding"><h1>KendallDoesCoding</a><i onClick="func()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item">
<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>

<script>
//show and hide dropdown list item on button click
function func2() {
var click = document.getElementById("item2");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/TechStudent11"><h1>TechStudent10</a><i onClick="func2()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item2">
<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>

<script>
//show and hide dropdown list item on button click
function func3() {
var click = document.getElementById("item3");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/aliraza944"><h1>Ali Raza</a><i onClick="func3()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item3">
<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>

<script>
//show and hide dropdown list item on button click
function func4() {
var click = document.getElementById("item4");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/JeffBucherDev"><h1>JeffBucherDev</a><i onClick="func4()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item4">
<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>

<script>
//show and hide dropdown list item on button click
function func5() {
var click = document.getElementById("item5");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/Bibhavshah"><h1>Bibhav Shah</a><i onClick="func5()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item5">
<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>
<script>
//show and hide dropdown list item on button click
function func6() {
var click = document.getElementById("item6");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/kira272921"><h1>Kira</a><i onClick="func6()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item6">
<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>
<script>
//show and hide dropdown list item on button click
function func7() {
var click = document.getElementById("item7");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/divyakelaskar"><h1>Divya Kelaskar</a><i onClick="func7()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item7">
<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>
<script>
//show and hide dropdown list item on button click
function func8() {
var click = document.getElementById("item8");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/samyberkane04"><h1>Samy Berkane</a><i onClick="func8()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item8">
<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>
<script>
//show and hide dropdown list item on button click
function func9() {
var click = document.getElementById("item9");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/Michael-Obele"><h1>Michael Obele</a><i onClick="func9()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item9">
<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>
<script>
//show and hide dropdown list item on button click
function func10() {
var click = document.getElementById("item10");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/Weave-Trix"><h1>Weave-Trix</a><i onClick="func10()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item10">
<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>
<script>
//show and hide dropdown list item on button click
function func11() {
var click = document.getElementById("item11");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/fk00750"><h1>F.K</a><i onClick="func11()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item11">
<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>

<script>
//show and hide dropdown list item on button click
function func12() {
var click = document.getElementById("item12");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/ArhyaSaha"><h1>Arhya Saha</a><i onClick="func12()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item12">
<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>
<script>
//show and hide dropdown list item on button click
function func13(){
var click = document.getElementById("item13");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/frazie"><h1>Frazier Odhiambo</a><i onclick="func13()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item13">
<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
47 changes: 47 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,50 @@ h2 {
font-family: "Beau Rivage", cursive;
font-size: 9mm;
}
.dropbtn {

border:2px;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
}

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

#item,#item2,#item3,#item4,#item5,#item6,#item7,#item8,#item9,#item10,#item11,#item12,#item13{
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;
}

#item13 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

#item,#item2,#item3,#item4,#item5,#item6,#item7,#item8,#item9,#item10,#item11,#item12,#item13 a:hover {background-color: #f1f1f1}

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


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