Skip to content

Commit

Permalink
Improve extension styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dor-sketch
Dor-sketch committed Sep 14, 2024
1 parent aba38de commit 5da7a9c
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 104 deletions.
69 changes: 39 additions & 30 deletions extension/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,44 +9,53 @@
<body>
<div class="header">
<div class="controls">
<select id="book" aria-label="__MSG_selectBook__">
<option value="">__MSG_selectBook__</option>
</select>
<select id="chapter" aria-label="__MSG_selectChapter__">
<option value="">__MSG_selectChapter__</option>
</select>
<input type="text" id="search" placeholder="__MSG_search__" aria-label="__MSG_search__" />
<button id="searchButton">__MSG_searchButton__</button>
<button id="helpBtn">__MSG_helpButton__</button>
<button id="aboutBtn">__MSG_aboutButton__</button>
<div class="select-wrapper">
<svg class="icon" viewBox="0 0 24 24">
<path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/>
</svg>
<select id="book" aria-label="__MSG_selectBook__">
<option value="">__MSG_selectBook__</option>
</select>
</div>
<div class="select-wrapper">
<svg class="icon" viewBox="0 0 24 24">
<path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/>
</svg>
<select id="chapter" aria-label="__MSG_selectChapter__">
<option value="">__MSG_selectChapter__</option>
</select>
</div>
<div class="search-wrapper">
<input type="text" id="search" placeholder="__MSG_search__" aria-label="__MSG_search__" />
<button id="searchButton" aria-label="__MSG_searchButton__">
<svg class="icon" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
</button>
</div>
<button id="toggleNumbering" aria-label="__MSG_toggleNumbering__">
<svg class="icon" viewBox="0 0 24 24">
<path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
</svg>
</button>
<div id="prevNext">
<button id="prevChapter">__MSG_prevChapter__</button>
<button id="nextChapter">__MSG_nextChapter__</button>
<button id="prevChapter" aria-label="__MSG_prevChapter__">
<svg class="icon" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
</svg>
</button>
<button id="nextChapter" aria-label="__MSG_nextChapter__">
<svg class="icon" viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
</svg>
</button>
</div>
<button id="toggleNumbering">__MSG_toggleNumbering__</button>
</div>
</div>
<div class="container">
<div id="content" class="content-area w-full"></div>
</div>

<div id="helpModal" class="modal">
<div class="modal-content">
<button class="close-modal" id="closeHelpModal">&times;</button>
<h2 id="helpTitle"></h2>
<p id="helpContent"></p>
</div>
</div>

<div id="aboutModal" class="modal">
<div class="modal-content">
<button class="close-modal" id="closeAboutModal">&times;</button>
<h2 id="aboutTitle"></h2>
<p id="aboutContent"></p>
</div>
</div>
</div>

<script src="popup.js" type="module"></script>
</body>
</html>
22 changes: 0 additions & 22 deletions extension/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24226,12 +24226,6 @@ const searchInput = document.getElementById('search');
const searchButton = document.getElementById('searchButton');
const prevChapterBtn = document.getElementById('prevChapter');
const nextChapterBtn = document.getElementById('nextChapter');
const helpModal = document.getElementById('helpModal');
const helpBtn = document.getElementById('helpBtn');
const closeHelpModal = document.getElementById('closeHelpModal');
const aboutModal = document.getElementById('aboutModal');
const aboutBtn = document.getElementById('aboutBtn');
const closeAboutModal = document.getElementById('closeAboutModal');
const toggleNumberingBtn = document.getElementById('toggleNumbering');

function initializeApp() {
Expand Down Expand Up @@ -24367,22 +24361,6 @@ toggleNumberingBtn.addEventListener('click', () => {
loadChapterContent(bookSelect.value, chapterSelect.value);
});

helpBtn.addEventListener('click', () => {
helpModal.style.display = 'flex';
});

closeHelpModal.addEventListener('click', () => {
helpModal.style.display = 'none';
});

aboutBtn.addEventListener('click', () => {
aboutModal.style.display = 'flex';
});

closeAboutModal.addEventListener('click', () => {
aboutModal.style.display = 'none';
});

function performSearch() {
const query = searchInput.value.trim();
if (!query) return;
Expand Down
108 changes: 56 additions & 52 deletions extension/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@
--background-color: #ecf0f1;
--text-color: #2c3e50;
--verse-hover-color: #f39c12;
--modal-bg: rgba(0, 0, 0, 0.5);
--modal-content-bg: #fff;
}

body {
Expand Down Expand Up @@ -37,32 +35,84 @@ body {
.controls {
display: flex;
flex-wrap: wrap;
gap: 5px;
gap: 10px;
align-items: center;
}

.select-wrapper, .search-wrapper {
position: relative;
flex-grow: 1;
}

.icon {
width: 20px;
height: 20px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10px;
fill: var(--primary-color);
}

select, input, button {
padding: 5px;
padding: 8px 10px;
border: none;
border-radius: 3px;
border-radius: 5px;
font-size: 14px;
width: 100%;
}

select, input {
background-color: white;
color: var(--text-color);
padding-left: 35px;
}

button {
background-color: var(--accent-color);
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}

button:hover {
background-color: darkorange;
}

button .icon {
position: static;
transform: none;
fill: white;
margin-right: 5px;
}

.search-wrapper {
display: flex;
}

.search-wrapper input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.search-wrapper button {
width: auto;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

#prevNext {
display: flex;
gap: 5px;
}

#prevNext button, #toggleNumbering {
padding: 8px 12px;
}

.container {
flex-grow: 1;
overflow-y: auto;
Expand Down Expand Up @@ -97,58 +147,12 @@ button:hover {
font-size: 0.9em;
}

.modal {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: var(--modal-bg);
justify-content: center;
align-items: center;
}

.modal-content {
background-color: var(--modal-content-bg);
padding: 20px;
border-radius: 5px;
max-width: 80%;
width: 300px;
position: relative;
}

.close-modal {
position: absolute;
top: 5px;
right: 10px;
font-size: 20px;
cursor: pointer;
}

.highlight {
background-color: yellow;
color: black;
}

#prevNext {
display: flex;
justify-content: space-between;
width: 100%;
}

@media (max-width: 400px) {
body {
height: 100vh;
}

.controls {
flex-direction: column;
}

select, input, button {
.select-wrapper, .search-wrapper {
width: 100%;
}
}

0 comments on commit 5da7a9c

Please sign in to comment.