Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-19 21:29:43 +02:00
Code Issues Releases Activity

ref: Refactoring

Browse source
This commit is contained in:
Maksim Eltyshev 2024-07-26 20:51:59 +02:00
parent 008c5b3fd0
commit 198518a51a
13 changed files with 52 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/public/index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"

4
client/src/components/Background/Background.module.scss
View file

@ -1,10 +1,10 @@
:global(#app) { :global(#app) {
.wrapper { .wrapper {
height: 100%; height: 100%;
max-height: 100vh;
max-width: 100vw;
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: -1; z-index: -1;
max-width: 100vw;
max-height: 100vh;
} }
} }

22
client/src/components/Board/Board.module.scss
View file

@ -14,7 +14,6 @@
transition: background 85ms ease-in, opacity 40ms ease-in, transition: background 85ms ease-in, opacity 40ms ease-in,
border-color 85ms ease-in; border-color 85ms ease-in;
width: 100%; width: 100%;
min-width: 272px;
&:active { &:active {
outline: none; outline: none;
@ -45,30 +44,11 @@
.lists { .lists {
display: inline-flex; display: inline-flex;
height: calc(100vh - 194px); height: 100%;
min-width: 100%; min-width: 100%;
border-radius: 2.5px;
}
.panel {
align-items: center;
display: flex;
margin-bottom: 20px;
}
.panelItem {
margin-right: 20px;
} }
.wrapper { .wrapper {
margin: 0 20px; margin: 0 20px;
@media only screen and (max-width: 797px) {
max-width: 100vw;
}
}
.scrollable {
min-width: 100%;
} }
} }

12
client/src/components/BoardActions/BoardActions.module.scss
View file

@ -2,22 +2,15 @@
.action { .action {
align-items: center; align-items: center;
display: flex; display: flex;
flex-wrap: nowrap;
flex: 0 0 auto; flex: 0 0 auto;
@media only screen and (max-width: 797px) {
gap: 10px;
}
} }
.actions { .actions {
align-items: center; align-items: center;
display: flex; display: flex;
flex-flow: norow wrap;
justify-content: flex-start;
align-items: center;
margin: 20px 20px;
gap: 20px; gap: 20px;
justify-content: flex-start;
margin: 20px 20px;
} }
.wrapper { .wrapper {
@ -25,7 +18,6 @@
overflow-y: hidden; overflow-y: hidden;
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
max-width: 100vw;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;

14
client/src/components/BoardActions/Filters.module.scss
View file

@ -10,7 +10,6 @@
display: inline-block; display: inline-block;
outline: none; outline: none;
padding: 0; padding: 0;
white-space: nowrap;
} }
.filterItem { .filterItem {
@ -46,14 +45,13 @@
} }
.search { .search {
height: 24px;
transition: width 0.2s ease;
width: 220px;
margin: 0 12px;
@media only screen and (min-width: 797px) {
width: 280px;
height: 30px; height: 30px;
margin: 0 12px;
transition: width 0.2s ease;
width: 280px;
@media only screen and (max-width: 797px) {
width: 220px;
} }
input { input {

13
client/src/components/Card/Card.module.scss
View file

@ -23,7 +23,8 @@
} }
@media only screen and (max-width: 797px) { @media only screen and (max-width: 797px) {
&:focus, &:active { &:focus,
&:active {
background: #ebeef0; background: #ebeef0;
color: #516b7a; color: #516b7a;
} }
@ -62,16 +63,16 @@
box-shadow: 0 1px 0 #ccc; box-shadow: 0 1px 0 #ccc;
position: relative; position: relative;
&:hover { @media only screen and (max-width: 797px) {
background: #f5f6f7;
border-bottom-color: rgba(9, 30, 66, 0.25);
.target { .target {
opacity: 1; opacity: 1;
} }
} }
@media only screen and (max-width: 797px) { &:hover {
background: #f5f6f7;
border-bottom-color: rgba(9, 30, 66, 0.25);
.target { .target {
opacity: 1; opacity: 1;
} }

7
client/src/components/CardModal/CardModal.jsx
View file

@ -515,14 +515,19 @@ const CardModal = React.memo(
<Icon name="copy outline" className={styles.actionIcon} /> <Icon name="copy outline" className={styles.actionIcon} />
{t('action.duplicate')} {t('action.duplicate')}
</Button> </Button>
{window.isSecureContext && (
<Button fluid className={styles.actionButton} onClick={handleCopyLinkClick}> <Button fluid className={styles.actionButton} onClick={handleCopyLinkClick}>
<Icon name={isLinkCopied ? 'linkify' : 'unlink'} className={styles.actionIcon} /> <Icon
name={isLinkCopied ? 'linkify' : 'unlink'}
className={styles.actionIcon}
/>
{isLinkCopied {isLinkCopied
? t('common.linkIsCopied') ? t('common.linkIsCopied')
: t('action.copyLink', { : t('action.copyLink', {
context: 'title', context: 'title',
})} })}
</Button> </Button>
)}
<DeletePopup <DeletePopup
title="common.deleteCard" title="common.deleteCard"
content="common.areYouSureYouWantToDeleteThisCard" content="common.areYouSureYouWantToDeleteThisCard"

18
client/src/components/CardModal/CardModal.module.scss
View file

@ -25,14 +25,14 @@
.actions { .actions {
margin-bottom: 24px; margin-bottom: 24px;
@media only screen and (max-width: 797px) { @media only screen and (max-width: 797px) {
margin-bottom: 10px; flex: 1;
width: 50%;
padding: 10px;
} }
@media only screen and (max-width: 425px) { @media only screen and (max-width: 425px) {
padding: 0;
width: 100%; width: 100%;
padding: unset;
} }
} }
@ -71,7 +71,9 @@
.contentPadding { .contentPadding {
padding: 8px 8px 0 16px; padding: 8px 8px 0 16px;
@media only screen and (max-width: 797px) { @media only screen and (max-width: 797px) {
padding-right: 16px;
width: 100% !important; width: 100% !important;
} }
} }
@ -166,6 +168,7 @@
.modalPadding { .modalPadding {
padding: 0px; padding: 0px;
@media only screen and (max-width: 797px) { @media only screen and (max-width: 797px) {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -200,11 +203,14 @@
.sidebarPadding { .sidebarPadding {
padding: 8px 16px 0 8px; padding: 8px 16px 0 8px;
@media only screen and (max-width: 797px) { @media only screen and (max-width: 797px) {
width: 100% !important; align-items: flex-start;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
align-items: flex-start; gap: 10px;
padding-left: 16px;
width: 100% !important;
} }
} }

1
client/src/components/Core/Core.module.scss
View file

@ -4,6 +4,7 @@
border-radius: 4px; border-radius: 4px;
bottom: 20px; bottom: 20px;
box-shadow: #b04632 0 1px 0; box-shadow: #b04632 0 1px 0;
max-width: calc(100% - 40px);
padding: 12px 18px; padding: 12px 18px;
position: fixed; position: fixed;
right: 20px; right: 20px;

2
client/src/components/Fixed/Fixed.module.scss
View file

@ -1,8 +1,8 @@
:global(#app) { :global(#app) {
.wrapper { .wrapper {
max-width: 100vw;
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
max-width: 100vw;
} }
} }

2
client/src/components/Header/Header.module.scss
View file

@ -87,8 +87,8 @@
} }
.userName { .userName {
margin-right: 10px;
display: none; display: none;
margin-right: 10px;
@media only screen and (min-width: 797px) { @media only screen and (min-width: 797px) {
display: block; display: block;

3
client/src/components/List/List.module.scss
View file

@ -111,7 +111,8 @@
} }
@media only screen and (max-width: 797px) { @media only screen and (max-width: 797px) {
&:focus, &:active { &:focus,
&:active {
background: rgba(9, 30, 66, 0.13); background: rgba(9, 30, 66, 0.13);
color: #516b7a; color: #516b7a;
} }

4
client/src/components/Memberships/Memberships.module.scss
View file

@ -11,6 +11,10 @@
vertical-align: top; vertical-align: top;
width: 36px; width: 36px;
@media only screen and (max-width: 797px) {
margin-left: 10px;
}
&:hover { &:hover {
background: rgba(0, 0, 0, 0.32); background: rgba(0, 0, 0, 0.32);
} }