Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

minor mobile fixes #493

Merged
merged 3 commits into from
Aug 8, 2024
Merged

minor mobile fixes #493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f6ddaad
aligned editor with cards on mobile, reduced height of editor and car…
AndersonCeci Aug 6, 2024
460d2cd
prettier
Aug 8, 2024
27b41e3
update margins
Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 5 additions & 11 deletions cypress/e2e/general-flows.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,12 @@ describe("general flows", () => {

it("should mark typos in the editor", () => {
cy.get('[data-test="editor"]').type("gabmim ");
cy.get('.typo').should("be.visible");
cy.get(".typo").should("be.visible");
});

it("should mark loanwords in the editor", () => {
cy.get('[data-test="editor"]').type("lider ");
cy.get('.loanword').should("be.visible");
cy.get(".loanword").should("be.visible");
});

it("should open and close the side menu as expected", () => {
Expand Down Expand Up @@ -207,26 +207,20 @@ describe("general flows", () => {
.find('[data-test="blur-marking-button"]')
.click();
cy.get(".typo").first().click();
cy.get(".typo")
.should("have.length", 3)
.should("be.visible");
cy.get(".typo").should("have.length", 3).should("be.visible");

cy.get('[data-test="marking-card"]')
.find('[data-test="suggestion"]')
.first()
.click();
cy.get(".typo").first().click();
cy.get(".typo")
.should("have.length", 2)
.should("be.visible");
cy.get(".typo").should("have.length", 2).should("be.visible");

cy.get('[data-test="marking-card"]')
.find('[data-test="suggestion"]')
.first()
.click();
cy.get(".typo")
.should("have.length", 1)
.should("be.visible");
cy.get(".typo").should("have.length", 1).should("be.visible");

cy.get('[data-test="marking-card"]')
.find('[data-test="dismiss-marking-button"]')
Expand Down
2 changes: 1 addition & 1 deletion src/app/header/header.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
>
<div class="header-name-gear-icon">
<button
id='off-canvas-start-button'
id="off-canvas-start-button"
class="off-canvas-start-button"
[ngClass]="{
'header-button-dark-mode': darkModeService.isDarkMode
Expand Down
11 changes: 8 additions & 3 deletions src/app/home/home.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
.input-container {
flex: 0 0 62%;
margin-left: 3rem;
margin-top: 3rem;
}

.typo-marking-card-header {
Expand Down Expand Up @@ -126,6 +127,7 @@
.output-container {
flex: 0 0 30%;
margin-right: 3rem;
margin-top: 3rem;
/*padding-right: 25px;*/
overflow-x: hidden;
overflow-y: visible;
Expand Down Expand Up @@ -345,8 +347,8 @@

.dismiss-marking-element-dark-mode {
background: transparent
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
center/1em auto no-repeat;
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
center/1em auto no-repeat;
}

.close-button-text-reset {
Expand Down Expand Up @@ -749,11 +751,14 @@ input:checked + .slider:before {
}

.input-container {
margin-top: 0;
margin-right: 3rem;
}

.output-container {
margin-left: 3rem;
margin-top: 0;
margin-left: 2.7rem;
margin-right: 2.7rem;
}
}

Expand Down
10 changes: 5 additions & 5 deletions src/app/home/home.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="high-level-container">
<div class="input-container mt-5">
<div class="input-container">
<div
class="card input-container-card border-secondary"
[ngClass]="{
Expand Down Expand Up @@ -29,7 +29,7 @@
spellcheck="false"
autocapitalize="off"
role="textbox"
aria-label='redaktori'
aria-label="redaktori"
aria-multiline="true"
data-test="editor"
></div>
Expand Down Expand Up @@ -141,7 +141,7 @@
/>
</div>
</div>
<div class="output-container mt-5">
<div class="output-container">
<div
*ngIf="
(processedText === undefined ||
Expand All @@ -152,7 +152,7 @@
<!-- TODO put into a method -->
<div class="card typo-marking-card border-secondary">
<div
class="card-header second-header"
class="card-header typo-marking-card-header second-header"
[ngClass]="{
'second-header-dark-mode': darkModeService.isDarkMode
}"
Expand Down Expand Up @@ -626,7 +626,7 @@ <h5 id="writingsHistoryModalLabel" class="modal-title">
<label
class="form-check-label"
for="flex-switch-check-checked"
>Përdor Historikun e Shkrimeve</label
>Përdor Historikun e Shkrimeve</label
>
<label class="switch">
<input
Expand Down
4 changes: 3 additions & 1 deletion src/app/home/home.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1411,7 +1411,9 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
}
case 'm':
case 'M': {
document.getElementById('off-canvas-start-button')!.click();
document
.getElementById('off-canvas-start-button')!
.click();
}
}
}
Expand Down
Loading