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.

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

Optional material design #255

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
change the design to material design.
h2Entwicklung committed Sep 5, 2022
commit 116489a9ae90067bac2d306e9644168601de9671
44 changes: 35 additions & 9 deletions client-data/board.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,19 @@
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to avoid embedding large blobs in this repo.
Can we use system fonts ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunentally Roboto is only possible as extra font.
But Arial almost looks like the same. We could also use Roboto directly from google, but this I want to avoid because then we are not independent.

But I think deliver a font is like the images we have in the repo. It`s not unusal to deliver the correct font in a software project.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just took a look. the size is only ~90kb

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we just use the system's default ? On the frontend wejust use

font-family: sans-serif;
font-weight: 300;

which I think looks decent and well-integrated everywhere.

}
html, body, svg {
padding:0;
margin:0;
font-family: Liberation sans, sans-serif;
font-family:Roboto, Arial, sans-serif;
}

#canvas {
@@ -10,7 +22,6 @@ html, body, svg {

#loadingMessage {
font-size: 1.5em;
background: #eee linear-gradient(#eeeeee, #cccccc);
padding: 20px;
width: 40%;
line-height: 50px;
@@ -20,7 +31,8 @@ html, body, svg {
top: 40%;
left: 30%;
z-index: 1;
box-shadow: 0 0 2px #333333;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
background-color: #f2f6fc;
transition: 1s;
}

@@ -101,16 +113,16 @@ html, body, svg {
border:1px solid #eeeeee;
text-decoration:none;
cursor:pointer;
background: #ffffff;
margin-top: 10px;
height: 40px;
line-height: 40px;
border-radius: 0px;
max-width: 40px;
transition-duration: .2s;
overflow: hidden;
width: max-content;
box-shadow: inset 0 0 3px #8FA2BC;
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
background-color: #f2f6fc;
margin-top: 16px;
}

#menu .tool:hover {
@@ -147,8 +159,10 @@ html, body, svg {
}

#menu .tool.curTool {
box-shadow: 0 0 5px #0074D9;
background: linear-gradient(#96E1FF, #36A2FF);

box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 10%);
border-bottom: 4px solid #36A2FF;
background: #f2f6fc;
}

#menu .tool-icon {
@@ -284,3 +298,15 @@ circle.opcursor {
line-height: 10px;
}
}

#textToolInput {
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
padding: 8px;
font-size: 24px;
border: none;
background: #f2f6fc;
}
#textToolInput:focus-visible {
border: none;
box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 10%);
}
1 change: 0 additions & 1 deletion client-data/board.html
Original file line number Diff line number Diff line change
@@ -6,7 +6,6 @@
<title>{{board}} | WBO | {{translations.collaborative_whiteboard}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../board.css" />
{{#if theme}}<link rel="stylesheet" type="text/css" href="../{{theme}}_board.css" /> {{/if}}
<script src="../socket.io/socket.io.js"></script>
<meta name="description" content="{{translations.tagline}}" />
<meta name="keywords"
24 changes: 18 additions & 6 deletions client-data/index.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,19 @@
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to remove that too don't we ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✔️

html {
min-height: 100%;
margin: 0;
font-family: sans-serif;
font-family:Roboto, Arial, sans-serif;
font-weight: 300;
font-size: 15px;
}
@@ -74,23 +86,23 @@ header:hover h2 {
.wbo-button {
white-space: nowrap;
text-decoration: none;
background: linear-gradient(#ccdfdf, #abc6c6);
margin-top: 15px;
line-height: 60px;
border-radius: 5px;
box-shadow: 1px 1px 2.5px #555;
display: block;
text-align: center;
color: black;
transition: 0.1s;
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
margin-top: 16px;
background: linear-gradient(#ccdfdf, #abc6c6);
}

a {
color: black;
}

.wbo-button:hover {
box-shadow: 0 0 5px #0074d9;
box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 10%);
}

.wbo-button:focus,
38 changes: 0 additions & 38 deletions client-data/material_board.css

This file was deleted.

3 changes: 1 addition & 2 deletions server/templating.js
Original file line number Diff line number Diff line change
@@ -51,8 +51,7 @@ class Template {
const prefix = request.url.split("/boards/")[0].substr(1);
const baseUrl = findBaseUrl(request) + (prefix ? prefix + "/" : "");
const moderator = isModerator;
const theme = process.env.THEME_OPTIONS===''?false:process.env.THEME_OPTIONS;
return { baseUrl, languages, language, translations, configuration, moderator, theme};
return { baseUrl, languages, language, translations, configuration, moderator};
}
serve(request, response, isModerator) {
const parsedUrl = url.parse(request.url, true);