Skip to content

Commit

Permalink
Update to latest Bootstrap version
Browse files Browse the repository at this point in the history
  • Loading branch information
@georapbox
georapbox committed Jan 14, 2024
1 parent f26b090 commit f1b3248
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 108 deletions.
62 changes: 24 additions & 38 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,6 @@
"@georapbox/files-dropzone-element": "~1.2.1",
"@georapbox/modal-element": "~1.2.1",
"@georapbox/web-share-element": "~3.1.0",
"bootstrap": "~4.6.2"
"bootstrap": "~5.3.2"
}
}
28 changes: 7 additions & 21 deletions src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,27 +75,13 @@ details summary:focus-visible {
}

/* Buttons */
.btn:disabled {
cursor: not-allowed;
}

.settings-button {
background-image: url(../assets/icons/gear.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 60%;
}

.btn-outline-secondary:hover svg path,
.btn-outline-dark:hover svg path {
transition: fill 0.15s ease-in-out;
}

.btn-outline-secondary:hover svg path,
.btn-outline-dark:hover svg path {
fill: #ffffff;
}

/* Misc */
.inputs-container {
flex: 1;
Expand Down Expand Up @@ -143,7 +129,7 @@ button[data-button="delete-text-box"] {
background-image: url(../assets/icons/trash.svg);
background-repeat: no-repeat;
background-position: center;
margin-left: 0.7rem;
margin-left: 0.5rem;
}

/* Gallery */
Expand Down Expand Up @@ -192,7 +178,7 @@ button[data-button="delete-text-box"] {
height: var(--move-btn-height);
background-position: center;
background-repeat: no-repeat;
border-color: var(--light);
border-color: var(--bs-light);
}

/* UP */
Expand Down Expand Up @@ -339,11 +325,11 @@ modal-element [slot="footer"] {

/* Files dropzone */
files-dropzone {
--dropzone-border-color: var(--secondary);
--dropzone-border-color-hover: var(--primary);
--dropzone-border-color-dragover: var(--primary);
--dropzone-background-color-hover: var(--light);
--dropzone-background-color-dragover: var(--light);
--dropzone-border-color: var(--bs-secondary);
--dropzone-border-color-hover: var(--bs-primary);
--dropzone-border-color-dragover: var(--bs-primary);
--dropzone-background-color-hover: var(--bs-light);
--dropzone-background-color-dragover: var(--bs-light);
--dropzone-focus-box-shadow: var(--focus-ring);
height: 100%;
}
Expand Down
76 changes: 36 additions & 40 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ <h1 class="page-title">Meme Generator</h1>
<summary><strong>Image selection options</strong></summary>

<div class="bg-light py-4 px-3 border shadow-sm rounded">
<div class="form-group">
<select class="custom-select" id="imageUploadMethodSelect" autocomplete="off">
<div class="mb-3">
<select class="form-select" id="imageUploadMethodSelect" autocomplete="off">
<option value="gallery">Select image from gallery</option>
<option value="fileSelectBtn">Use an image from your device</option>
<option value="imageUrlForm">Use an image from URL</option>
Expand All @@ -65,13 +65,11 @@ <h1 class="page-title">Meme Generator</h1>
<div class="upload-method" id="gallery">
<div class="input-group mb-1">
<input type="text" class="form-control" id="gallerySearch" placeholder="Filter templates..." aria-label="Filter templates">
<div class="input-group-append">
<span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
<path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
</svg>
</span>
</div>
<span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16" role="img">
<path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
</svg>
</span>
</div>

<div class="gallery">
Expand Down Expand Up @@ -134,46 +132,44 @@ <h1 class="page-title">Meme Generator</h1>
</div>
</div>

<button type="button" id="fileSelectBtn" class="btn btn-primary btn-block d-flex justify-content-center align-items-center upload-method" hidden>
<img src="assets/icons/photo.svg" width="20" height="20" alt="photo icon" class="mr-2">
<button type="button" id="fileSelectBtn" class="btn btn-primary w-100 d-flex justify-content-center align-items-center gap-2 upload-method" hidden>
<img src="assets/icons/photo.svg" width="20" height="20" alt="photo icon">
Select Image
</button>

<form id="imageUrlForm" class="upload-method form-inline flex-nowrap" hidden>
<label class="sr-only" for="imageUrl">Image URL</label>

<input type="url" name="imageUrl" id="imageUrl" autocomplete="off" placeholder="Enter image URL" class="form-control mr-2 w-100" />
<form id="imageUrlForm" class="upload-method d-flex flex-nowrap gap-2" hidden>
<div class="flex-grow-1">
<label class="visually-hidden" for="imageUrl">Image URL</label>
<input type="url" name="imageUrl" id="imageUrl" autocomplete="off" placeholder="Enter image URL" class="form-control w-100" />
</div>

<button type="submit" class="btn btn-primary" style="min-width: 75px;">
<button type="submit" class="btn btn-primary align-self-end" style="min-width: 75px;">
<div class="spinner" hidden>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
<span class="label">Submit</span>
</button>
</form>

<button class="upload-method btn btn-primary btn-block d-flex align-items-center justify-content-center" id="openVideoModalBtn" hidden>
<img src="assets/icons/camera.svg" width="20" height="20" alt="camera icon" class="mr-2" />
<button class="upload-method btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2" id="openVideoModalBtn" hidden>
<img src="assets/icons/camera.svg" width="20" height="20" alt="camera icon" />
Take Photo
</button>

<form id="solidColorForm" class="upload-method" hidden>
<div class="form-row">
<div class="col-4">
<label for="canvasColor">Color:</label>
<input type="color" name="canvasColor" id="canvasColor" class="form-control" value="#ffffff">
</div>

<div class="col-4">
<label for="canvasWidth">Width:</label>
<input type="number" name="canvasWidth" id="canvasWidth" class="form-control" min="0" max="800" value="600">
</div>
<form id="solidColorForm" class="upload-method row g-2" hidden>
<div class="col-4">
<label for="canvasColor">Color:</label>
<input type="color" name="canvasColor" id="canvasColor" class="form-control" value="#ffffff" style="height: 33.5px;">
</div>
<div class="col-4">
<label for="canvasWidth">Width:</label>
<input type="number" name="canvasWidth" id="canvasWidth" class="form-control" min="0" max="800" value="600">
</div>

<div class="col-4">
<label for="canvasHeight">Height:</label>
<input type="number" name="canvasHeight" id="canvasHeight" class="form-control" min="0" max="800" value="400">
</div>
<div class="col-4">
<label for="canvasHeight">Height:</label>
<input type="number" name="canvasHeight" id="canvasHeight" class="form-control" min="0" max="800" value="400">
</div>
</form>
</div>
Expand All @@ -184,17 +180,17 @@ <h1 class="page-title">Meme Generator</h1>

<div id="inputsContainer" class="inputs-container"></div>

<div class="clearfix mt-3">
<button class="btn btn-outline-dark float-right d-flex align-items-center" id="addTextboxBtn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="18" height="18" class="mr-1">
<div class="d-flex justify-content-end mt-3">
<button class="btn btn-outline-dark d-flex align-items-center" id="addTextboxBtn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="18" height="18" role="img">
<path fill="currentColor" d="M416 277.333H277.333V416h-42.666V277.333H96v-42.666h138.667V96h42.666v138.667H416v42.666z" />
</svg>
Add text
</button>
</div>
</details>

<button type="button" class="btn btn-primary btn-block mt-5 d-flex align-items-center justify-content-center" id="generateMemeBtn" disabled autocomplete="off">
<button type="button" class="btn btn-primary w-100 mt-5 d-flex align-items-center justify-content-center" id="generateMemeBtn" disabled autocomplete="off">
Generate Meme
</button>
</div>
Expand All @@ -219,11 +215,11 @@ <h5 slot="header">Download Meme</h5>

<div slot="footer">
<a class="btn btn-primary" href="#" download="" id="downloadMemeBtn">
<img src="assets/icons/save.svg" width="20" height="20" alt="Generate meme" class="mr-1" />
<img src="assets/icons/save.svg" width="20" height="20" alt="Generate meme" />
Download
</a>

<web-share class="ml-1" hidden>
<web-share hidden>
<button slot="button" behavior="button" type="button" class="btn btn-dark">
<img src="assets/icons/share.svg" width="20" height="20" alt="Share" />
Share
Expand Down
Loading

0 comments on commit f1b3248

Please sign in to comment.