forked from zolcsi/map-of-pi
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Initial conversion and restructure of artifacts.
- Loading branch information
Showing
36 changed files
with
497 additions
and
23 deletions.
There are no files selected for viewing
83 changes: 83 additions & 0 deletions
83
...end/src/app/business/business-settings/business-products/business-products.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| <main class="menu-settings"> | ||
| <section class="menu-settings__section"> | ||
| <div class="menu-settings__toggle"> | ||
| <label for="menu-toggle" class="menu-settings__label">Menu <span class="toggle-status">off</span> | ||
| <input type="checkbox" id="menu-toggle" name="menu_toggle" class="menu-settings__checkbox"> | ||
| <span class="menu-settings__slider"></span> | ||
| </label> | ||
| </div> | ||
| <div class="menu-settings__toggle hidden"> | ||
| <label for="order-toggle" class="menu-settings__label">Accept orders <span class="toggle-status">off</span> | ||
| <input type="checkbox" id="order-toggle" name="order_toggle" class="menu-settings__checkbox"> | ||
| <span class="menu-settings__slider"></span> | ||
| </label> | ||
| </div> | ||
| <div class="menu-settings__toggle hidden"> | ||
| <label for="payment-toggle" class="menu-settings__label">Accept payments <span class="toggle-status">off</span> | ||
| <input type="checkbox" id="payment-toggle" name="payment_toggle" class="menu-settings__checkbox"> | ||
| <span class="menu-settings__slider"></span> | ||
| </label> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="menu-setting__floating-button-section"> | ||
| <button class="menu-setting__floating-button hidden"> | ||
| <img src="../../../../assets/images/business/menu-add-button.png" alt="Add new item button"> | ||
| </button> | ||
| </section> | ||
| <div id="items-display-area"></div> | ||
| </main> | ||
|
|
||
| <!-- The modal itself --> | ||
| <div class="modal" id="add-item-modal"> | ||
| <div class="modal__content"> | ||
|
|
||
| <form id="add-item-form" action="/submit-action-url" method="post"> | ||
| <button class="modal__close-button" aria-label="Close">×</button> | ||
|
|
||
| <!-- Modal title --> | ||
| <h2 class="modal__title">Add new item</h2> | ||
|
|
||
| <!-- Add item name --> | ||
| <div class="modal__item-name"> | ||
| <label for="item-name" class="modal__label">Item name</label> | ||
| <input type="text" id="item-name" class="modal__input modal__input-item-name" /> | ||
| </div> | ||
|
|
||
| <!-- Add item button --> | ||
| <div class="modal__add-item-button"> | ||
| <input type="file" id="item-image-upload" class="modal__input-file" accept="image/*" style="display: none;"/> | ||
| <label for="item-image-upload" class="modal__add-button" aria-label="Add item" > | ||
| <img src="../../../../assets/images/business/add-item-button.png" alt="Add item button"/> | ||
| </label> | ||
| <div id="image-preview" class="modal__image-preview"></div> | ||
| </div> | ||
|
|
||
| <!-- Add price input --> | ||
| <div class="modal__add-price"> | ||
| <label for="item-price" class="modal__label modal__label-text">Price</label> | ||
| <input type="text" id="item-price" class="modal__input modal__input--price" /> | ||
| <div class="modal__item-icon"> | ||
| <img src="../../../../assets/images/business/Pi-logo.png" alt="Pi logo"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Preparation time input group --> | ||
| <div class="modal__prep-time"> | ||
| <label for="prep-time" class="modal__label">How long to prepare this meal?</label> | ||
| <input type="text" id="prep-time" class="modal__input modal__input-prep-time" /> | ||
| </div> | ||
|
|
||
| <!-- Description input group --> | ||
| <div class="modal__description"> | ||
| <label for="description" class="modal__label">Description</label> | ||
| <textarea id="description" class="modal__textarea" maxlength="50" rows="4"></textarea> | ||
| </div> | ||
|
|
||
| <!-- Confirm button --> | ||
| <div class="modal__confirm"> | ||
| <button class="modal__confirm-btn">Confirm</button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> |
5 changes: 5 additions & 0 deletions
5
...end/src/app/business/business-settings/business-products/business-products.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'); | ||
|
|
||
| @import '../../../../assets/styles/business/business-products/header.scss'; | ||
| @import '../../../../assets/styles/business/business-products/main.scss'; | ||
| @import '../../../../assets/styles/business/business-products/modal.scss'; |
22 changes: 22 additions & 0 deletions
22
.../src/app/business/business-settings/business-products/business-products.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { BusinessProductsComponent } from './business-products.component'; | ||
|
|
||
| describe('BusinessProductsComponent', () => { | ||
| let component: BusinessProductsComponent; | ||
| let fixture: ComponentFixture<BusinessProductsComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [BusinessProductsComponent] | ||
| }) | ||
| .compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(BusinessProductsComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
12 changes: 12 additions & 0 deletions
12
frontend/src/app/business/business-settings/business-products/business-products.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-business-products', | ||
| standalone: true, | ||
| imports: [], | ||
| templateUrl: './business-products.component.html', | ||
| styleUrl: './business-products.component.scss' | ||
| }) | ||
| export class BusinessProductsComponent { | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes
File renamed without changes
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 43 additions & 0 deletions
43
frontend/src/assets/styles/business/business-products/header.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| .menu-settings-header { | ||
| position: relative; | ||
| padding: 0.5rem 1rem; | ||
| text-align: center; | ||
| font-family: var(--font-family-main); | ||
| border-bottom: 2px solid var(--color-text-color); | ||
| } | ||
|
|
||
| .menu-settings-header__back-button, | ||
| .menu-settings-header__brand, | ||
| .menu-settings-header__app-name, | ||
| .menu-settings-header__logo { | ||
| margin-top: 1rem; | ||
| } | ||
|
|
||
| .menu-settings-header__back-button { | ||
| position: absolute; | ||
| top: 25px; | ||
| display: block; | ||
| background: none; | ||
| border: none; | ||
| color: #1C1B1F; | ||
| } | ||
|
|
||
| .menu-settings-header__logo { | ||
| width: 25px; | ||
| height: auto; | ||
| } | ||
|
|
||
| .menu-settings-header__brand { | ||
| display: flex; /* Flexbox to align logo and app name */ | ||
| justify-content: center; | ||
| align-items: center; | ||
| font-size: 1rem; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .menu-settings-header__title { | ||
| margin-top: 2rem; /* Space between app name and title */ | ||
| line-height: 24px; | ||
| font-size: 1.125rem; | ||
| font-weight: 600; | ||
| } |
126 changes: 126 additions & 0 deletions
126
frontend/src/assets/styles/business/business-products/main.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| .menu-settings { | ||
| position: relative; | ||
| top: 1.5rem; | ||
| font-family: var(--font-family-main); | ||
| font-weight: lighter; | ||
| } | ||
|
|
||
| .menu-settings__section { | ||
| margin: 1rem; | ||
| } | ||
|
|
||
| .menu-settings__label { | ||
| position:static; | ||
| display: inline-block; | ||
| cursor: pointer; | ||
| margin-top: 0; | ||
| margin-left: 4rem; | ||
| width: 140px; | ||
| } | ||
|
|
||
| .hidden { | ||
| display: none; | ||
| } | ||
|
|
||
| .menu-setting__floating-button-section { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .menu-setting__floating-button { | ||
| position: absolute; | ||
| top: 200px; | ||
| border: none; | ||
| background: none; | ||
| margin-top: 6rem; | ||
| cursor: pointer; | ||
| outline: none; | ||
| } | ||
|
|
||
| .menu-setting__floating-button:active { | ||
| transform: translateY(4px); | ||
| } | ||
|
|
||
| .menu-settings__toggle { | ||
| margin-bottom: 1.5rem; | ||
| } | ||
|
|
||
| .menu-settings__toggle { | ||
| position: relative; | ||
| width: 40px; | ||
| height: 24px; | ||
| } | ||
|
|
||
| .menu-settings__toggle input { | ||
| opacity: 0; | ||
| width: 0; | ||
| height: 0; | ||
| } | ||
|
|
||
| .menu-settings__slider { | ||
| position: absolute; | ||
| cursor: pointer; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background-color: #ffffff; | ||
| -webkit-transition: .4s; | ||
| transition: .4s; | ||
| border: 2px solid var(--color-text-color); | ||
| } | ||
|
|
||
| .menu-settings__slider:before { | ||
| position: absolute; | ||
| top: -0.1rem; | ||
| right: 1.1rem; | ||
| content: ""; | ||
| height: 24px; | ||
| width: 22px; | ||
| background-color: rgb(2, 2, 2); | ||
| -webkit-transition: .4s; | ||
| transition: .4s; | ||
| } | ||
|
|
||
| .menu-settings__slider:after { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 0.25rem; | ||
| left: 1.7rem; | ||
| width: 12px; /* Smaller than the ::before to create the donut hole */ | ||
| height: 12px; | ||
| background-color: #FFFFFF; /* White for the hole */ | ||
| border-radius: 50%; /* Makes it circular */ | ||
| transition: .4s; | ||
| opacity: 0; /* Make it invisible by default */ | ||
| } | ||
|
|
||
| input:checked + .menu-settings__slider:after { | ||
| opacity: 1; /* Make it visible when the toggle is "on" */ | ||
| /* Ensure the positioning is correct when visible */ | ||
| } | ||
|
|
||
| .menu-settings__slider--off { | ||
| border: 2px solid #a9a9a9; | ||
| } | ||
|
|
||
| .menu-settings__slider--off:before { | ||
| background-color: #a9a9a9 !important; | ||
| } | ||
|
|
||
| input:checked + .menu-settings__slider:before { | ||
| -webkit-transform: translateX(26px); | ||
| -ms-transform: translateX(26px); | ||
| transform: translateX(26px); | ||
| } | ||
|
|
||
| /* Rounded sliders */ | ||
| .menu-settings__slider { | ||
| border-radius: 34px; | ||
| } | ||
|
|
||
| .menu-settings__slider:before { | ||
| border-radius: 50%; | ||
| background-color: rgba(29,114,75,255);; | ||
| } |
Oops, something went wrong.