Skip to content

Commit

Permalink
feat: add styls for mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
@SerhiyDmytruk
SerhiyDmytruk committed Oct 9, 2023
1 parent 92b50d3 commit 743558b
Show file tree
Hide file tree
Showing 8 changed files with 47 additions and 71 deletions.
1 change: 0 additions & 1 deletion dist/assets/MovieDetailPage-0d770c56.js
View file

This file was deleted.

1 change: 0 additions & 1 deletion dist/assets/MovieForm-39ae8994.js
View file

This file was deleted.

5 changes: 0 additions & 5 deletions dist/assets/index-0234a162.js
View file

This file was deleted.

1 change: 0 additions & 1 deletion dist/assets/index-705b5ff8.css
View file

This file was deleted.

Binary file removed dist/favicon.ico
View file
Binary file not shown.
15 changes: 0 additions & 15 deletions dist/index.html
View file

This file was deleted.

2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Movie mini crud proj</title>
</head>
<body class="h-screen w-screen absolute bg-gray-200 dark:bg-gray-900">
<body class="h-screen w-screen absolute bg-gray-900 dark:bg-gray-900">
<div id="app" class="h-screen w-screen"></div>
<script type="module" src="/src/main.js"></script>
</body>
Expand Down
93 changes: 46 additions & 47 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,187 +2,186 @@
@tailwind components;
@tailwind utilities;


.app {
@apply max-w-full flex flex-col items-center justify-center h-screen mx-auto relative space-y-8;
@apply max-w-full flex flex-col items-center justify-center h-screen mx-auto relative space-y-8;
}

.modal-wrapper {
@apply absolute inset-0 flex items-center justify-center z-20 bg-gray-800/40 backdrop-blur;
@apply absolute inset-0 flex items-center justify-center z-20 bg-gray-800/40 backdrop-blur;
}

.modal-close-button {
@apply absolute -right-12 -top-2 text-gray-300 p-2 hover:text-white
@apply absolute -right-12 -top-2 text-gray-300 p-2 hover:text-white;
}

.modal-title {
@apply w-full bg-gray-900 p-4 rounded-t-md text-2xl text-white
@apply w-full bg-gray-900 p-4 rounded-t-md text-2xl text-white;
}

.modal-wrapper-inner {
@apply relative shrink-0 w-full max-w-2xl rounded-md flex flex-col shadow-2xl bg-white dark:bg-gray-800 dark:text-white;
@apply relative shrink-0 w-full max-w-2xl rounded-md flex flex-col shadow-2xl bg-white dark:bg-gray-800 dark:text-white;
}

.modal-inner {
@apply p-4 space-y-4
@apply p-4 space-y-4;
}

.movie-form-input-wrapper {
@apply flex flex-col items-start justify-start w-full;
@apply flex flex-col items-start justify-start w-full;
}

.movie-form-input {
@apply w-full dark:bg-gray-900 rounded-md;
@apply w-full dark:bg-gray-900 rounded-md;
}

.movie-form-textarea {
@apply w-full dark:bg-gray-900 h-24 rounded-md;
@apply w-full dark:bg-gray-900 h-24 rounded-md;
}

.movie-form-checkbox {
@apply rounded-md focus:bg-pink-500/25 appearance-none checked:bg-pink-500 dark:bg-gray-900;
@apply rounded-md focus:bg-pink-500/25 appearance-none checked:bg-pink-500 dark:bg-gray-900;
}

.movie-form-checkbox-label {
@apply flex items-center justify-start space-x-2;
@apply flex items-center justify-start space-x-2;
}

.movie-form-actions-wrapper {
@apply flex items-center justify-between w-full;
@apply flex items-center justify-between w-full;
}

.button {
@apply bg-gray-500 hover:bg-gray-400 p-2 rounded-md;
@apply bg-gray-500 hover:bg-gray-400 p-2 rounded-md;
}

.button-primary {
@apply bg-cyan-500 hover:bg-cyan-400 p-2 rounded-md text-white;
@apply bg-cyan-500 hover:bg-cyan-400 p-2 rounded-md text-white;
}

.button-disabled {
@apply bg-gray-600 text-gray-400 cursor-not-allowed;
@apply bg-gray-600 text-gray-400 cursor-not-allowed;
}

.movie-form-error {
@apply text-red-700 h-8;
@apply text-red-700 h-8;
}

.movie-actions-list-wrapper {
@apply flex items-center justify-between w-full max-w-7xl px-8;
@apply flex items-center justify-between w-full max-w-7xl px-8;
}

.movie-actions-list-info {
@apply flex items-center justify-center space-x-8 text-white text-xl;
@apply flex items-center justify-center space-x-8 text-white text-xl;
}

.movie-actions-list-actions {
@apply flex items-center justify-between space-x-8;
@apply flex items-center justify-between space-x-8;
}

.movie-actions-list-action-button {
@apply p-2 rounded-md text-sm self-end justify-self-end;
@apply p-2 rounded-md text-sm self-end justify-self-end;
}

.movie-list {
@apply flex flex-wrap items-center justify-between max-w-7xl overflow-scroll h-[860px];
@apply flex flex-wrap items-center justify-between max-w-7xl overflow-scroll h-[860px];
}

.movie-item {
@apply w-96 shrink-0 h-auto bg-white rounded-md flex flex-col items-center justify-start overflow-hidden shadow-2xl mr-8 mt-8;
@apply w-40 md:w-96 shrink-0 h-auto bg-white rounded-md flex flex-col items-center justify-start overflow-hidden shadow-2xl md:mr-8 mr-4 md:mt-8 mt-4;
}

.movie-item-image-wrapper {
@apply h-[520px] overflow-hidden w-full relative;
@apply h-[250px] md:h-[520px] overflow-hidden w-full relative;
}

.movie-item-image {
@apply object-cover object-center h-[600px];
@apply object-cover md:object-center object-top h-auto md:h-[600px];
}

.movie-item-no-image {
@apply h-[520px] absolute z-0 inset-0 w-full bg-gray-500 flex items-center justify-center;
@apply h-[520px] absolute z-0 inset-0 w-full bg-gray-500 flex items-center justify-center;
}

.movie-item-star-wrapper {
@apply absolute top-0 right-0;
@apply absolute top-0 right-0;
}

.movie-item-star-content-wrapper {
@apply absolute inset-0 flex items-center justify-center text-center;
@apply absolute inset-0 flex items-center justify-center text-center;
}

.movie-item-star-rating-icon {
@apply h-16 w-16;
@apply h-16 w-16;
}

.movie-item-star-content-rating-rated {
@apply text-xl text-yellow-800;
@apply text-xl text-yellow-800;
}

.movie-item-star-content-rating-not-rated {
@apply text-xl text-gray-400;
@apply text-xl text-gray-400;
}

.movie-item-content-wrapper {
@apply h-56 p-4 flex flex-col items-start justify-start w-full;
@apply h-56 p-4 flex flex-col items-start justify-start w-full;
}

.movie-item-title-wrapper {
@apply h-16 shrink-0 w-full;
@apply h-16 shrink-0 w-full;
}

.movie-item-title {
@apply text-2xl truncate;
@apply text-2xl truncate;
}

.movie-item-description-wrapper {
@apply h-24 overflow-scroll flex-1;
@apply h-24 overflow-scroll flex-1;
}

.movie-item-description {
@apply text-sm;
@apply text-sm;
}

.movie-item-genres-wrapper {
@apply flex items-center justify-start space-x-1;
@apply flex items-center justify-start space-x-1;
}

.movie-item-genre-tag {
@apply text-xs bg-indigo-500 text-white py-0.5 px-2 rounded-full;
@apply text-xs bg-indigo-500 text-white py-0.5 px-2 rounded-full;
}

.movie-item-rating-wrapper {
@apply w-full flex items-center justify-start h-8 shrink-0;
@apply w-full flex items-center justify-start h-8 shrink-0;
}

.movie-item-rating-text {
@apply text-xs mr-2 leading-7;
@apply text-xs mr-2 leading-7;
}

.movie-item-star-icon-wrapper {
@apply items-center justify-start flex flex-1 space-x-1;
@apply items-center justify-start flex flex-1 space-x-1;
}

.movie-item-star-icon-button {
@apply rounded-md disabled:cursor-not-allowed;
@apply rounded-md disabled:cursor-not-allowed;
}

.movie-item-star-icon {
@apply h-5 w-5;
@apply h-5 w-5;
}

.movie-item-actions-list-wrapper {
@apply group-hover:flex shrink-0 hidden items-center justify-end space-x-2;
@apply group-hover:flex shrink-0 hidden items-center justify-end space-x-2;
}

.movie-item-action-edit-button {
@apply rounded-full bg-gray-200 p-3 text-gray-800 hover:text-white hover:bg-indigo-500;
@apply rounded-full bg-gray-200 p-3 text-gray-800 hover:text-white hover:bg-indigo-500;
}

.movie-item-action-remove-button {
@apply rounded-full bg-gray-200 p-3 text-gray-800 hover:text-white hover:bg-red-500;
@apply rounded-full bg-gray-200 p-3 text-gray-800 hover:text-white hover:bg-red-500;
}

.flex-spacer {
@apply w-full flex-1;
@apply w-full flex-1;
}

0 comments on commit 743558b

Please sign in to comment.