Skip to content

Commit

Permalink
Fix: Updated app UI styling (#31)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hoangsonww
hoangsonww committed Feb 23, 2024
1 parent 01484d4 commit d689d17
Show file tree
Hide file tree
Showing 18 changed files with 257 additions and 57 deletions.
10 changes: 10 additions & 0 deletions MovieVerse-Frontend/html/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,16 @@
border-radius: 10px;
z-index: 10;
}

@media (min-width: 900px) {
#search {
margin-top: 16px;
}

#form1 {
margin-right: 0;
}
}
</style>
</head>

Expand Down
11 changes: 11 additions & 0 deletions MovieVerse-Frontend/html/actor-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,17 @@

gtag('config', 'G-CQKJ67FXZ4');
</script>
<style>
@media (min-width: 900px) {
#search {
margin-top: 16px;
}

#form1 {
margin-right: 0;
}
}
</style>
</head>

<body class="movie-details-body">
Expand Down
11 changes: 11 additions & 0 deletions MovieVerse-Frontend/html/analytics.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,17 @@

gtag('config', 'G-CQKJ67FXZ4');
</script>
<style>
@media (min-width: 900px) {
#search {
margin-top: 16px;
}

#form1 {
margin-right: 0;
}
}
</style>
</head>
<body class="movie-details-body">
<header id="homepage-header" style="margin-top: -5px">
Expand Down
18 changes: 17 additions & 1 deletion MovieVerse-Frontend/html/chatbot.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,22 @@
margin-right: 0;
}
}

@media (min-width: 900px) {
#local-time {
margin-top: -7px;
}

#header {
margin-top: 26px;
padding-left: 25px;
}

#form {
margin-top: 2px;
margin-right: 57px;
}
}
</style>
</head>

Expand Down Expand Up @@ -101,7 +117,7 @@ <h1 id="stats-display" class="clock" style="font-size: 20px"></h1>

<div id="search-container" style="margin-top: 10px">
<form id="form">
<input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!"/>
<input type="text" id="search" style="width: 216px" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!"/>
<button type="button" id="button-search" onclick="handleSearch()">Search</button>
</form>
</div>
Expand Down
15 changes: 13 additions & 2 deletions MovieVerse-Frontend/html/company-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,17 @@

gtag('config', 'G-CQKJ67FXZ4');
</script>
<style>
@media (min-width: 900px) {
#search {
margin-top: 0;
}

#form {
margin-right: 19px;
}
}
</style>
</head>

<body class="movie-details-body">
Expand Down Expand Up @@ -74,12 +85,12 @@ <h1 id="stats-display" class="clock"></h1>
</form>
</header>

<div class="genres" style="margin-left: 25px; margin-top: 25px">
<div class="genres" style="margin-left: 25px; margin-top: 5px">
<h2 id="search-title"></h2>
<button id="clear-search-btn" style="display: none;">Clear Search Results</button>
</div>

<main id="main" style="margin-left: 25px">
<main id="main" style="margin-left: 25px; height: 0">

</main>

Expand Down
6 changes: 6 additions & 0 deletions MovieVerse-Frontend/html/create-account.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,12 @@
background-color: #22254b;
color: white;
}

@media (min-width: 900px) {
#search {
margin-top: 0;
}
}
</style>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
<script>
Expand Down
21 changes: 18 additions & 3 deletions MovieVerse-Frontend/html/director-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,25 @@

gtag('config', 'G-CQKJ67FXZ4');
</script>
<style>
header {
margin-top: -5px;
}

@media (min-width: 900px) {
#search {
margin-top: 16px;
}

#form1 {
margin-right: 0;
}
}
</style>
</head>

<body class="movie-details-body">
<header style="margin-bottom: -50px; margin-top: -28px">
<header>
<a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer" title="Click to go back to the home page">
<h1 id="my-heading" style="margin-bottom: -10px">
The Mo<span class="highlight">vieV</span>erse
Expand Down Expand Up @@ -72,12 +87,12 @@ <h1 id="stats-display" class="clock"></h1>
</form>
</header>

<div class="genres" style="margin-left: 25px">
<div class="genres" style="margin-left: 25px; height: 0; margin-top: -10px">
<h2 id="search-title"></h2>
<button id="clear-search-btn" style="display: none;">Clear Search Results</button>
</div>

<main id="main" style="margin-left: 25px; margin-bottom: -40px">
<main id="main" style="margin-left: 25px; margin-bottom: -40px; height: 0">

</main>

Expand Down
10 changes: 10 additions & 0 deletions MovieVerse-Frontend/html/favorites.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,16 @@
#how-to-use-section:hover {
background-color: #534caf;
}

@media (min-width: 900px) {
#search {
margin-top: 16px;
}

#form1 {
margin-right: 0;
}
}
</style>
</head>

Expand Down
14 changes: 12 additions & 2 deletions MovieVerse-Frontend/html/movie-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,16 @@
min-width: 400px;
margin-top: 0;
}

@media (min-width: 900px) {
#search {
margin-top: 16px;
}

#form1 {
margin-right: 0;
}
}
</style>
</head>

Expand Down Expand Up @@ -79,12 +89,12 @@ <h1 id="stats-display" class="clock"></h1>
</form>
</header>

<div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none">
<div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none; height: 0">
<h2 id="search-title"></h2>
<button id="clear-search-btn" style="display: none;">Clear Search Results</button>
</div>

<main id="main" style="margin-left: 35px; margin-top: 20px">
<main id="main" style="margin-left: 35px; height: 0">

</main>

Expand Down
17 changes: 16 additions & 1 deletion MovieVerse-Frontend/html/movie-match.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,21 @@

gtag('config', 'G-CQKJ67FXZ4');
</script>
<style>
@media (min-width: 900px) {
#search {
margin-top: 16px !important;
}

#form1 {
margin-right: 18px;
}
}

#search {
margin-top: -1px;
}
</style>
</head>

<body class="movie-details-body" style="overflow-x: hidden">
Expand Down Expand Up @@ -67,7 +82,7 @@ <h1 id="stats-display" class="clock"></h1>
<i class="fas fa-user" id="profileIcon"></i>
</button>
<form id="form1">
<input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" style="margin-top: -1px"/>
<input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!"/>
<button type="button" id="button-search" onclick="handleSearch()">Search</button>
</form>
</header>
Expand Down
15 changes: 15 additions & 0 deletions MovieVerse-Frontend/html/movie-timeline.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,21 @@

gtag('config', 'G-CQKJ67FXZ4');
</script>
<style>
@media (min-width: 900px) {
#search {
margin-top: 16px !important;
}

#form1 {
margin-right: 19px;
}
}

#search {
margin-top: -1px;
}
</style>
</head>
<body class="movie-details-body">
<header style="margin-bottom: -20px; margin-top: -5px">
Expand Down
10 changes: 10 additions & 0 deletions MovieVerse-Frontend/html/privacy-policy.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,16 @@
color: #ff8623;
text-decoration: underline;
}

@media (min-width: 900px) {
#search {
margin-top: 16px;
}

#form1 {
margin-right: 0;
}
}
</style>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
<script>
Expand Down
9 changes: 9 additions & 0 deletions MovieVerse-Frontend/html/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,15 @@
transition: background-color 0.3s ease;
}

@media (min-width: 900px) {
#search {
margin-top: 16px;
}

#form1 {
margin-right: 0;
}
}
</style>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
Expand Down
14 changes: 14 additions & 0 deletions MovieVerse-Frontend/html/terms-of-service.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,20 @@
color: #ff8623;
text-decoration: underline;
}

@media (min-width: 900px) {
#search {
margin-top: 16px;
}

#form1 {
margin-right: 0;
}

header {
margin-top: -5px;
}
}
</style>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion MovieVerse-Frontend/html/trivia.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
}

#form {
margin-top: 0;
margin-top: 20px;
}
}
</style>
Expand Down
28 changes: 28 additions & 0 deletions MovieVerse-Frontend/html/tv-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,34 @@
margin-top: -75px;
}
}

header {
margin-top: 9px;
}

@media (max-width: 600px) {
#my-heading {
margin-top: 10px;
}

#form1 {
margin-top: 20px;
}
}

@media (min-width: 900px) {
#search {
margin-top: 16px;
}

#form1 {
margin-right: 0;
}

header {
margin-top: -5px;
}
}
</style>
</head>

Expand Down
10 changes: 10 additions & 0 deletions MovieVerse-Frontend/html/user-profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,16 @@
background-color: #22254b;
color: #fff;
}

@media (min-width: 900px) {
#search {
margin-top: 0 !important;
}

#form1 {
margin-right: 19px;
}
}
</style>
<script src="../js/user-profile.js" type="module"></script>
</head>
Expand Down
Loading

0 comments on commit d689d17

Please sign in to comment.