Skip to content

Commit

Permalink
Merge pull request #72 from nck974/mobile-friendly
Browse files Browse the repository at this point in the history
Mobile friendly
  • Loading branch information
nck974 authored Dec 2, 2023
2 parents 546e276 + 63dcfee commit 0d60942
Show file tree
Hide file tree
Showing 49 changed files with 514 additions and 573 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,11 @@
<!-- Show a add category as float action button -->
<div class="fab-container">
<button mat-fab color="primary"
(click)="onCreateNewCategory()"><mat-icon>add</mat-icon></button>
(click)="onCreateNewCategory()"><mat-icon>add</mat-icon>
</button>
</div>

<!-- Show inventory -->
<!-- Show categories -->
<div *ngIf="isLoading; else notLoading">
<app-loading-spinner></app-loading-spinner>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +0,0 @@
.fab-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1;
}
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
<mat-card class="card" *ngIf="category">
<div class="card-wrapper flex-center">
<mat-card class="material-card-element-no-padding card-with-hover-effect"
*ngIf="category">

<mat-card-header>
<mat-card-header>

<mat-card-title class="card-header" (click)="onOpenDetails()" title="{{category.description}}">
{{ category.name }}
</mat-card-title>
<mat-card-title class="show-pointer" (click)="onOpenDetails()"
title="{{category.description}}">
{{ category.name }}
</mat-card-title>

<div mat-card-avatar [style.background-color]="getAvatarColor()"></div>
<div mat-card-avatar [style.background-color]="getAvatarColor()"></div>

</mat-card-header>
</mat-card-header>

</mat-card>
</mat-card>
</div>
Original file line number Diff line number Diff line change
@@ -1,11 +0,0 @@
.card {
margin: 10px;
}
.card:hover{
border: 1px solid black;
box-shadow: 8px 8px 2px 1px #7b1fa21a;
}

.card-header {
cursor: pointer;
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@

<ng-template #notLoading>

<div class="center-card" *ngIf="category; else notFound">
<mat-card align="center" class="card">
<div class="flex-center card-wrapper" *ngIf="category; else notFound">
<mat-card class="material-card-element-no-padding">
<!-- Header -->
<mat-card-header>
<mat-card-title>
Expand All @@ -26,8 +26,10 @@

<!-- Content -->
<mat-card-content>
<p class="no-overflow">{{ category.description }}</p>
<div class="category-metadata">
<p class="no-overflow" *ngIf="category.description">
{{ category.description }}
</p>
<div class="item-image-container thin-border">
<p>Last Updated: {{ category.updatedOn | date:'medium' }}</p>
<p>Created On: {{ category.createdOn | date:'medium' }}</p>
</div>
Expand All @@ -36,12 +38,13 @@
<!-- Action buttons -->
<mat-card-actions align="end">

<button mat-icon-button aria-label="Edit category"
<button mat-icon-button aria-label="Edit category" title="Edit"
(click)="onEditCategory()">
<mat-icon>edit</mat-icon>
</button>

<button mat-icon-button aria-label="Delete category"
title="Delete"
(click)="onDeleteCategory()">
<mat-icon>delete</mat-icon>
</button>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +0,0 @@
.card {
margin: 1rem;
max-width: 70rem;
min-width: 35rem;
}

.center-card {
display: flex;
align-self: center;
justify-content: center;
}

.item-metadata {
padding: 10px;
border: 1px solid #ccc;
}

.no-overflow {
word-wrap: break-word;
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,18 @@

<ng-template #categoryFormTemplate>

<div class="center">
<mat-card align="center" class="card">
<div class="flex-center card-wrapper">
<mat-card class="material-card-element">

<form class="form" [formGroup]="categoryForm"
(ngSubmit)="onSubmit()">
<!-- Title -->
<mat-card-title class="flex-center material-card-title">
{{isNewCategory ? "Create category" : "Edit category"}}
</mat-card-title>

<mat-card-title class="center title">
{{isNewCategory ? "Create category" : "Edit category"}}
</mat-card-title>
<form [formGroup]="categoryForm"
(ngSubmit)="onSubmit()">

<!-- Fields -->
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput required maxlength="50"
Expand All @@ -49,9 +51,12 @@
<ngx-mat-color-picker #picker></ngx-mat-color-picker>
</mat-form-field>

<div class="center">
<!-- Button -->
<div class="flex-center">
<button mat-raised-button color="primary" type="submit"
[disabled]="categoryForm.invalid">Submit</button>
[disabled]="categoryForm.invalid">
{{isNewCategory ? "Create" : "Save"}}
</button>
</div>

</form>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,28 +1,3 @@
.center {
display: flex;
align-self: center;
justify-content: center;
}

.card {
margin: 1rem;
max-width: 600px;
padding: 1rem;
}

.title {
margin: 1rem;
}

.form {
min-width: 150px;
width: 100%;
}

.form mat-form-field {
width: 100%;
}

.textarea-height {
min-height: 150px;
}
}
Original file line number Diff line number Diff line change
@@ -1,43 +1,54 @@
<!-- Display multiple forms as a stepper -->
<div
*ngIf="selectedImages && selectedImages.length > 0; else selectMultipleImages"
class="stepper-container">
<mat-vertical-stepper [linear]="true" #stepper>
<mat-step *ngFor="let image of selectedImages; let index = index"
[editable]="!isStepCompleted(index)">
<div class="card-wrapper flex-center">
<div
*ngIf="selectedImages && selectedImages.length > 0; else selectMultipleImages"
class="material-card-element">
<mat-vertical-stepper [linear]="true" #stepper>
<mat-step *ngFor="let image of selectedImages; let index = index"
[editable]="!isStepCompleted(index)">

<ng-template matStepLabel>Item {{index + 1}}</ng-template>
<app-edit-single-item [createFromImage]="image"
(onItemCreate)="onFinishStep($event, index)"></app-edit-single-item>
</mat-step>
</mat-vertical-stepper>
<ng-template matStepLabel>Item {{index + 1}}</ng-template>
<app-edit-single-item [createFromImage]="image"
[hideTitle]="true"
(onItemCreate)="onFinishStep($event, index)"></app-edit-single-item>
</mat-step>
</mat-vertical-stepper>
</div>
</div>

<!-- Select images button -->
<ng-template #selectMultipleImages>

<!-- Hidden form to select files -->
<input #fileInput type="file"
<input
id="bulk-file-import-input"
#fileInput type="file"
accept="image/gif, image/jpeg, image/png"
(change)="onFilesSelected($event)"
style="display: none" multiple>
<div class="bulk-wrapper"

<!-- Box to drag items or click -->
<div class="flex-center card-wrapper"
(dragover)="onDragOver($event)"
(drop)="onDrop($event)"
(click)="fileInput.click()"
(dragleave)="onDragLeave($event)">
<div class="bulk-container" [ngClass]="{ 'drag-over': isDragging }">
<div
class="dashed-container-height material-card-element centered-text flex-center show-pointer dashed-border hover-dashed-border"
[ngClass]="{ 'drag-over-border': isDragging }">
<div>
<label for="file-input">
<div class="item-add-new-image-container">
<button mat-icon-button class="add-image-button"
<div>
<button mat-icon-button
(click)="fileInput.click()">
<mat-icon>add_a_photo</mat-icon>
</button>
</div>
</label>
<div> Click to select the images of the items or drag inside
the
box</div>
<div>
Click to select the images of the items or drag inside the
box
</div>
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,31 +1,8 @@
.bulk-wrapper{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.dashed-container-height {
min-height: 10rem;
}

.bulk-container{
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed #ccc;
padding: 20px;
margin: 20px;
text-align: center;
width: 100%;
max-width: 600px;
min-height: 200px;
cursor: pointer;
}

.stepper-container{
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.drag-over{
border: 4px dashed;
}
// Disable the padding of the card
::ng-deep .mat-vertical-content {
padding: 0px !important;
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@
<input #fileInput type="file"
accept="image/gif, image/jpeg, image/png"
(change)="onFileSelected($event)"
style="display: none">
class="hidden-input">

<!-- Show actual image -->
<div class="item-image-container"
<!-- Show current image -->
<div class="item-image-container thin-border"
*ngIf="imagePath && !selectedImage; else addNewImageTemplate">
<img [attr.src]="imagePath | secureImage | async"
class="item-image"
alt="item-image">
<div class="item-image-buttons-container">
<button mat-icon-button class="edit-button"
<div class="flex-end">
<button mat-icon-button
(click)="fileInput.click()">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button class="delete-button"
<button mat-icon-button
(click)="onDeleteImage()">
<mat-icon>delete</mat-icon>
</button>
Expand All @@ -26,13 +26,13 @@
<ng-template #addNewImageTemplate>

<!-- Preview -->
<div class="item-image-container"
<div class="item-image-container thin-border"
*ngIf="selectedImage; else addImageForm">
<img [src]="selectedImage"
class="item-image"
alt="selected-image">
<div class="item-image-buttons-container">
<button mat-icon-button class="delete-button"
<div class="flex-end">
<button mat-icon-button
(click)="onFileDeselected()">
<mat-icon>delete</mat-icon>
</button>
Expand All @@ -42,7 +42,7 @@
<!-- Form -->
<ng-template #addImageForm>
<label for="file-input">
<div class="item-add-new-image-container">
<div class="flex-center">
<button mat-icon-button class="add-image-button"
(click)="fileInput.click()">
<mat-icon>add_a_photo</mat-icon>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,3 @@
// Image
.item-image-container {
max-width: 60rem;
padding: 10px;
border: 1px solid #ccc;
}

.item-image {
width: 100%;
height: auto;
}

.item-image-buttons-container {
display: flex;
justify-content: flex-end;
}

.item-add-new-image-container {
display: flex;
justify-content: center;
.hidden-input {
display: none;
}
Loading

0 comments on commit 0d60942

Please sign in to comment.