Skip to content

Commit

Permalink
#56 Test, clean up and document CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
SandraBergstrom committed Jul 5, 2023
1 parent 4c2ea74 commit f3c7f31
Show file tree
Hide file tree
Showing 17 changed files with 181 additions and 187 deletions.
25 changes: 17 additions & 8 deletions TESTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,24 +26,36 @@ The testing.md file provides an overview of the testing conducted on Travel Tick
### HTML Validation
[W3C Markup Validation](https://validator.w3.org/) is a service provided by the W3C that allows you to validate your HTML code against the official specifications. It checks for syntax errors, improper tag usage, and other issues that may affect the structure and semantics of your web pages. Validating your HTML code with W3C Markup Validation helps ensure that your pages are well-formed and adhere to web standards.

All pages passed through the validation and the code was pasted in and I used a filter to remove issues related to the Django templating system. <details><summary>See filter</summary>![Result]()</details>
The html passed through the validation and the code was pasted in and I used a filter to remove issues related to the React system. <details><summary>See filter</summary>![Result](/docs/testing/html-filter.png)</details>

| **Tested** | **Result** | **View Result** | **Pass** |
--- | --- | --- | :---:
|page| No errors | <details><summary>Screenshot of result</summary>![Result]()</details>| :white_check_mark:
|index| No errors | <details><summary>Screenshot of result</summary>![Result](/docs/testing/html.png)</details>| :white_check_mark:


### CSS Validation
[W3C Jigsaw](https://jigsaw.w3.org/css-validator/) is a tool provided by the World Wide Web Consortium (W3C) that allows you to validate and check the correctness of your HTML and CSS code. It helps ensure that your web pages comply with the standards set by the W3C, promoting interoperability and accessibility.
[W3C Jigsaw](https://jigsaw.w3.org/css-validator/) is a tool provided by the World Wide Web Consortium (W3C) that allows you to validate and check the correctness of your CSS code. It helps ensure that your web pages comply with the standards set by the W3C, promoting interoperability and accessibility. I have tested by adding each page to the validator.

| **Tested** | **Result** | **View Result** | **Pass** |
--- | --- | --- | :---:
|CSS file | No errors|[Result](http://jigsaw.w3.org/css-validator/validator$link)| :white_check_mark:
|Landingpage/Home| No errors|[Result](https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Ftravel-tickr-03d04732f340.herokuapp.com%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=sv)| :white_check_mark:
|Login| No errors|[Result](https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Ftravel-tickr-03d04732f340.herokuapp.com%2Flogin&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=sv)| :white_check_mark:
|Sign up| No errors|[Result](https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Ftravel-tickr-03d04732f340.herokuapp.com%2Fsignup&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=sv)| :white_check_mark:
|Create Memory| No errors|[Result](https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Ftravel-tickr-03d04732f340.herokuapp.com%2Fposts%2Fcreate&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=sv)| :white_check_mark:
|Post detail| No errors|[Result](https://travel-tickr-03d04732f340.herokuapp.com/posts/5)| :white_check_mark:
|Following/Bucketlist| No errors|[Result](https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Ftravel-tickr-03d04732f340.herokuapp.com%2Ffeed&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=sv)| :white_check_mark:
|Traveler Profile| No errors|[Result](https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Ftravel-tickr-03d04732f340.herokuapp.com%2Ftravelers%2F1&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=sv)| :white_check_mark:
|Edit traveler| No errors|[Result](https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Ftravel-tickr-03d04732f340.herokuapp.com%2Ftravelers%2F1%2Fedit&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=sv)| :white_check_mark:
|Edit username| No errors|[Result](https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Ftravel-tickr-03d04732f340.herokuapp.com%2Ftravelers%2F1%2Fedit%2Fusername&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=sv)| :white_check_mark:
|Edit password| No errors|[Result](https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Ftravel-tickr-03d04732f340.herokuapp.com%2Ftravelers%2F1%2Fedit%2Fpassword&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=sv)| :white_check_mark:

Although the validator returned some error messages, these are due to external libraries and frameworks that are known to be reliable and widely used. The custom code written for this project has been thoroughly checked and does not contain any important errors or issues.

### Python Validation
[PEP 8](https://pep8ci.herokuapp.com/) is a style guide for writing Python code to ensure consistency and readability. It provides guidelines on how to format code, naming conventions for variables and functions, and other best practices. Following PEP 8 helps to improve code quality, readability, and maintainability.



Note: The specific details and validation results for each file can be viewed by expanding the corresponding sections.

| **Tested** | **Result** | **View Result** | **Pass** |
Expand Down Expand Up @@ -118,10 +130,7 @@ The website was tested on the following browsers:

<br>


## Manual Testing


## Manual testing
### Testing user stories UPDATE

#### As a first-time user...
Expand Down
Binary file added docs/testing/html-filter.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/testing/html.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 12 additions & 8 deletions src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,29 +13,33 @@

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

.form-control {
background-color: white;
}

h1, h2, h3, h4, h5 {
font-family: 'Lato' sans-serif;
h1,
h2,
h3,
h4,
h5 {
font-family: "Lato", sans-serif;
color: var(--clr-accent-dark);
}
}

p {
font-family: 'Roboto', sans-serif;
font-family: "Roboto", sans-serif;
color: var(--clr-accent-dark);
}

Expand All @@ -45,4 +49,4 @@ p {
border-color: var(--clr-accent-dark);
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(72, 102, 113, 0.25);
}
}
12 changes: 6 additions & 6 deletions src/styles/AlertMessages.module.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.alert-warning-custom {
background-color: var(--clr-accent-pink);
color: var(--clr-primary-light);
border: 1px solid var(--clr-accent-pink);
padding: 8px;
margin-top: 2px;
}
background-color: var(--clr-accent-pink);
color: var(--clr-primary-light);
border: 1px solid var(--clr-accent-pink);
padding: 8px;
margin-top: 2px;
}
22 changes: 11 additions & 11 deletions src/styles/Asset.module.css
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
.Asset {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 120px;
}
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 120px;
}

@media screen and (max-width: 500px) {
.Asset img {
width: 90%;
}
}
@media screen and (max-width: 500px) {
.Asset img {
width: 90%;
}
}
8 changes: 4 additions & 4 deletions src/styles/Avatar.module.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.Avatar {
border-radius: 50%;
margin: 0px 8px 0px 8px;
object-fit: cover;
}
border-radius: 50%;
margin: 0px 8px 0px 8px;
object-fit: cover;
}
124 changes: 62 additions & 62 deletions src/styles/Button.module.css
Original file line number Diff line number Diff line change
@@ -1,64 +1,64 @@
.Button {
font-size: 0.8rem;
align-self: center;
border-radius: 10px;
border-color: transparent;
padding: 4px 10px;
margin-left: 2px;
margin-right: 2px;
min-width: 75px;
}

.Button:hover {
opacity: 0.8;
border-color: transparent;
cursor: pointer;
}

.Button:hover:active {
background-color: var(--clr-accent-dark) !important;
}

.Button:active {
background-color: var(--clr-accent-dark) !important;
}

.Wide {
padding: 10px 50px;
width: 100%;
}

.Blue,
.BlueOutline:hover {
background-color: var(--clr-accent-dark);
color: #ffffff;
}

.BlueOutline,
.Blue:hover {
background-color: var(--clr-accent-light);
color: var(--clr-primary-light);
}

.Pink,
.PinkOutline:hover {
background-color: var(--clr-accent-danger);
color: var(--clr-primary-light);
}

.Pink:hover,
.PinkOutline {
background-color: var(--clr-accent-pink);
color: var(--clr-primary-light);
}

.Bright {
background-color: var(--clr-primary-light);
color: var(--clr-accent-dark);
border-color: var(--clr-accent-dark);
}
font-size: 0.8rem;
align-self: center;
border-radius: 10px;
border-color: transparent;
padding: 4px 10px;
margin-left: 2px;
margin-right: 2px;
min-width: 75px;
}

.Bright:hover {
background-color: var(--clr-accent-danger);
color: var(--clr-primary-light);
}
.Button:hover {
opacity: 0.8;
border-color: transparent;
cursor: pointer;
}

.Button:hover:active {
background-color: var(--clr-accent-dark) !important;
}

.Button:active {
background-color: var(--clr-accent-dark) !important;
}

.Wide {
padding: 10px 50px;
width: 100%;
}

.Blue,
.BlueOutline:hover {
background-color: var(--clr-accent-dark);
color: #ffffff;
}

.BlueOutline,
.Blue:hover {
background-color: var(--clr-accent-light);
color: var(--clr-primary-light);
}

.Pink,
.PinkOutline:hover {
background-color: var(--clr-accent-danger);
color: var(--clr-primary-light);
}

.Pink:hover,
.PinkOutline {
background-color: var(--clr-accent-pink);
color: var(--clr-primary-light);
}

.Bright {
background-color: var(--clr-primary-light);
color: var(--clr-accent-dark);
border-color: var(--clr-accent-dark);
}

.Bright:hover {
background-color: var(--clr-accent-danger);
color: var(--clr-primary-light);
}
2 changes: 1 addition & 1 deletion src/styles/Comment.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,5 @@ p {
display: flex;
flex-direction: column-reverse;
align-items: flex-start >;
padding-left: 5px
padding-left: 5px;
}
10 changes: 5 additions & 5 deletions src/styles/Counter.module.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.counter {
color: var(--clr-accent-dark);
font-family: 'Roboto', sans-serif;
font-size: small;
padding: 5px;
}
color: var(--clr-accent-dark);
font-family: "Roboto", sans-serif;
font-size: small;
padding: 5px;
}
4 changes: 2 additions & 2 deletions src/styles/MoreDropdown.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@
}

.Dots {
margin-left: 10px;
}
margin-left: 10px;
}
4 changes: 2 additions & 2 deletions src/styles/NavBar.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -26,5 +26,5 @@
}

.RotatedIcon {
transform: rotate(-45deg)
}
transform: rotate(-45deg);
}
4 changes: 2 additions & 2 deletions src/styles/NotFound.module.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.marginTop {
margin-top: 25vh;
}
margin-top: 25vh;
}
4 changes: 2 additions & 2 deletions src/styles/Post.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ h5 {

.TitleText {
color: var(--clr-accent-dark);
font-family: 'Lato', sans-serif;
font-family: "Lato", sans-serif;
}

.Heart {
Expand All @@ -37,4 +37,4 @@ h5 {
display: flex;
align-items: stretch;
justify-content: center;
}
}
Loading

0 comments on commit f3c7f31

Please sign in to comment.