aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/util/CurrentUserUtils.ts54
-rw-r--r--src/client/util/SettingsManager.scss10
-rw-r--r--src/client/views/AntimodeMenu.scss16
-rw-r--r--src/client/views/nodes/AudioBox.scss8
-rw-r--r--src/client/views/nodes/PDFBox.scss188
-rw-r--r--src/client/views/nodes/PresBox.scss47
-rw-r--r--src/client/views/presentationview/PresElementBox.scss78
7 files changed, 125 insertions, 276 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index e402718bf..8e53c7a3c 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -55,9 +55,20 @@ export class CurrentUserUtils {
removeDropProperties: new List<string>(["dropAction"]), title: "query view", icon: "question-circle"
});
}
-
+ // Prototype for mobile button (not sure if 'Advanced Item Prototypes' is ideal location)
if (doc["template-mobile-button"] === undefined) {
- const queryTemplate = this.mobileButton({ title: "NEW MOBILE BUTTON", onClick: undefined, _backgroundColor: "lightgrey" }, [this.ficon({ ignoreClick: true, icon: "mobile", backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, "NEW MOBILE BUTTON"), this.mobileButtonInfo({}, "You can customize this button and make it your own.")])]);
+ const queryTemplate = this.mobileButton({
+ title: "NEW MOBILE BUTTON",
+ onClick: undefined,
+ _backgroundColor: "lightgrey"
+ },
+ [this.ficon({
+ ignoreClick: true,
+ icon: "mobile",
+ backgroundColor: "rgba(0,0,0,0)"
+ }),
+ this.mobileTextContainer({},
+ [this.mobileButtonText({}, "NEW MOBILE BUTTON"), this.mobileButtonInfo({}, "You can customize this button and make it your own.")])]);
doc["template-mobile-button"] = CurrentUserUtils.ficon({
onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
dragFactory: new PrefetchProxy(queryTemplate) as any as Doc,
@@ -457,6 +468,7 @@ export class CurrentUserUtils {
return doc.myItemCreators as Doc;
}
+ // Sets up mobile menu if it is undefined creates a new one, otherwise returns existing menu
static setupActiveMobileMenu(doc: Doc) {
if (doc.activeMobileMenu === undefined) {
console.log("undefined");
@@ -465,6 +477,7 @@ export class CurrentUserUtils {
return doc.activeMobileMenu as Doc;
}
+ // Sets up mobileMenu stacking document
static setupMobileMenu() {
const menu = new PrefetchProxy(Docs.Create.StackingDocument(this.setupMobileButtons(), {
_width: 980, ignoreClick: true, lockedPosition: false, _chromeStatus: "disabled", title: "home", _yMargin: 100
@@ -472,15 +485,17 @@ export class CurrentUserUtils {
return menu;
}
+ // SEts up mobile buttons for inside mobile menu
static setupMobileButtons(doc?: Doc, buttons?: string[]) {
const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [
{ title: "WORKSPACES", icon: "bars", click: 'switchToMobileLibrary()', backgroundColor: "lightgrey", info: "Access your Workspaces from your mobile, and navigate through all of your documents. " },
- { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "lightgrey", info: "Upload files from your mobile device so they can be accessed on Dash Web." },
- { title: "MOBILE UPLOAD", icon: "mobile", click: 'switchToMobileUploads()', backgroundColor: "lightgrey", info: "Access the collection of your mobile uploads." },
+ { title: "UPLOAD", icon: "upload", click: 'openMobileUploads()', backgroundColor: "lightgrey", info: "Upload files from your mobile device so they can be accessed on Dash Web." },
+ { title: "MOBILE UPLOAD", icon: "mobile", click: 'switchToMobileUploadCollection()', backgroundColor: "lightgrey", info: "Access the collection of your mobile uploads." },
{ title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey", info: "Use your phone to record, dictate and then upload audio onto Dash Web." },
- { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "lightgrey", info: "Use your phone as a remote for you presentation." },
+ { title: "PRESENTATION", icon: "desktop", click: 'switchToMobilePresentation()', backgroundColor: "lightgrey", info: "Use your phone as a remote for you presentation." },
{ title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey", info: "Change your password, log out, or manage your account security." }
];
+ // returns a list of mobile buttons
return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data =>
this.mobileButton({
title: data.title,
@@ -492,24 +507,27 @@ export class CurrentUserUtils {
);
}
+ // sets up the main document for the mobile button
static mobileButton = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MulticolumnDocument(docs, {
...opts,
dropAction: undefined, removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15,
borderRounding: "5px", boxShadow: "0 0", _chromeStatus: "disabled"
}) as any as Doc
+ // sets up the text container for the information contained within the mobile button
static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MultirowDocument(docs, {
...opts,
dropAction: undefined, removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 450, _nativeHeight: 250, _width: 450, _height: 250, _yMargin: 25,
backgroundColor: "rgba(0,0,0,0)", borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", ignoreClick: true
}) as any as Doc
-
+ // Sets up the title of the button
static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => Docs.Create.TextDocument(buttonTitle, {
...opts,
dropAction: undefined, title: buttonTitle, _fontSize: 37, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)"
}) as any as Doc
+ // Sets up the description of the button
static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => Docs.Create.TextDocument(buttonInfo, {
...opts,
dropAction: undefined, title: "info", _fontSize: 25, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)", _dimMagnitude: 2,
@@ -553,23 +571,6 @@ export class CurrentUserUtils {
return CurrentUserUtils.setupWorkspaces(userDoc);
}
- static setupMobileInkingDoc(userDoc: Doc) {
- return Docs.Create.FreeformDocument([], { title: "Mobile Inking", backgroundColor: "white" });
- }
-
- static setupMobileUploadDoc(userDoc: Doc) {
- // const addButton = Docs.Create.FontIconDocument({ onDragStart: ScriptField.MakeScript('addWebToMobileUpload()'), title: "Add Web Doc to Upload Collection", icon: "plus", backgroundColor: "black" })
- const webDoc = Docs.Create.WebDocument("https://www.britannica.com/biography/Miles-Davis", {
- title: "Upload Images From the Web", _chromeStatus: "enabled", lockedPosition: true
- });
- const uploadDoc = Docs.Create.StackingDocument([], {
- title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true
- });
- return Docs.Create.StackingDocument([webDoc, uploadDoc], {
- _width: screen.width, lockedPosition: true, _chromeStatus: "disabled", title: "Upload", _autoHeight: true, _yMargin: 80, backgroundColor: "lightgray"
- });
- }
-
// setup the Creator button which will display the creator panel. This panel will include the drag creators and the color picker.
// when clicked, this panel will be displayed in the target container (ie, sidebarContainer)
static async setupToolsBtnPanel(doc: Doc, sidebarContainer: Doc) {
@@ -764,6 +765,7 @@ export class CurrentUserUtils {
}
}
+ // Right sidebar is where mobile uploads are contained
static setupRightSidebar(doc: Doc) {
if (doc.rightSidebarCollection === undefined) {
doc.rightSidebarCollection = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Mobile Uploads" }));
@@ -823,7 +825,7 @@ export class CurrentUserUtils {
this.setupDefaultIconTemplates(doc); // creates a set of icon templates triggered by the document deoration icon
this.setupDocTemplates(doc); // sets up the template menu of templates
this.setupRightSidebar(doc); // sets up the right sidebar collection for mobile upload documents and sharing
- this.setupActiveMobileMenu(doc);
+ this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile
this.setupOverlays(doc); // documents in overlay layer
this.setupDockedButtons(doc); // the bottom bar of font icons
this.setupDefaultPresentation(doc); // presentation that's initially triggered
@@ -862,9 +864,5 @@ export class CurrentUserUtils {
}
}
-Scripting.addGlobal(function setupMobileInkingDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileInkingDoc(userDoc); },
- "initializes the Mobile inking document", "(userDoc: Doc)");
-Scripting.addGlobal(function setupMobileUploadDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileUploadDoc(userDoc); },
- "initializes the Mobile upload document", "(userDoc: Doc)");
Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); },
"creates a new workspace when called");
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 0116c5294..1c2a2ce05 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -137,31 +137,21 @@
@media only screen and (max-device-width: 480px) {
.settings-interface {
- background-color: whitesmoke !important;
- color: grey;
width: 80vw;
height: 400px;
}
.settings-interface .settings-body .settings-content input {
- border-radius: 5px;
- border: none;
font-size: 30;
- padding: 4px;
- min-width: 100%;
- margin: 2px 0;
}
.settings-interface button {
width: 100%;
font-size: 30px;
- align-self: center;
background: #b2cef8;
- margin-top: 4px;
}
.settings-interface .settings-heading {
- letter-spacing: .5em;
font-size: 25;
}
} \ No newline at end of file
diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss
index 17506b3dc..be21cec12 100644
--- a/src/client/views/AntimodeMenu.scss
+++ b/src/client/views/AntimodeMenu.scss
@@ -46,15 +46,8 @@
@media only screen and (max-device-width: 480px) {
.antimodeMenu-cont {
- position: absolute;
- z-index: 10000;
height: 100px;
width: 100vw;
- background: #323232;
- box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
- border-radius: 0px 6px 6px 6px;
- // overflow: hidden;
- display: flex;
&.with-rows {
flex-direction: column-reverse;
@@ -79,14 +72,5 @@
.antimodeMenu-button:hover {
background-color: #121212;
}
-
- .antimodeMenu-dragger {
- height: 100%;
- transition: width .2s;
- background-image: url("https://logodix.com/logo/1020374.png");
- background-size: 90% 100%;
- background-repeat: no-repeat;
- background-position: left center;
- }
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index b5d113ca0..c959b79f5 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -186,18 +186,12 @@
.audiobox-container .audiobox-record,
.audiobox-container-interactive .audiobox-record {
- pointer-events: all;
font-size: 3em;
- width: 100%;
- height: 100%;
- position: relative;
- pointer-events: none;
}
.audiobox-container .audiobox-controls .audiobox-player .audiobox-playhead,
.audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation,
- .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-playhead,
- .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-dictation {
+ .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-playhead {
width: 70px;
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 974ddecdf..fbbd49a2f 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -11,18 +11,19 @@
.pdfBox-ui {
position: absolute;
- width: 100%;
- height: 100%;
- z-index: 1;
- pointer-events: none;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ pointer-events: none;
- .pdfBox-pageNums {
+ .pdfBox-pageNums {
display: flex;
flex-direction: row;
height: 25px;
position: absolute;
left: 5px;
top: 5px;
+
.pdfBox-overlayButton-fwd,
.pdfBox-overlayButton-back {
background: #121721;
@@ -35,29 +36,29 @@
border-radius: 3px;
pointer-events: all;
}
- }
-
- .pdfBox-overlayButton {
- border-bottom-left-radius: 50%;
- display: flex;
- justify-content: space-evenly;
- align-items: center;
- height: 20px;
- background: none;
- padding: 0;
- position: absolute;
- pointer-events: all;
-
- .pdfBox-overlayButton-arrow {
- width: 0;
- height: 0;
- border-top: 10px solid transparent;
- border-bottom: 10px solid transparent;
- border-right: 15px solid #121721;
- transition: all 0.5s;
- }
-
- .pdfBox-overlayButton-iconCont {
+ }
+
+ .pdfBox-overlayButton {
+ border-bottom-left-radius: 50%;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ height: 20px;
+ background: none;
+ padding: 0;
+ position: absolute;
+ pointer-events: all;
+
+ .pdfBox-overlayButton-arrow {
+ width: 0;
+ height: 0;
+ border-top: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-right: 15px solid #121721;
+ transition: all 0.5s;
+ }
+
+ .pdfBox-overlayButton-iconCont {
background: #121721;
height: 20px;
width: 25px;
@@ -222,120 +223,60 @@
}
}
+// CSS adjusted for mobile devices
@media only screen and (max-device-width: 480px) {
.pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton,
.pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton {
- border-bottom-left-radius: 50%;
- display: flex;
- justify-content: space-evenly;
- align-items: center;
height: 60px;
- background: none;
- padding: 0;
- }
- .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-iconCont,
- .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-iconCont {
- background: #121721;
- height: 60px;
- width: 75px;
- font-size: 30px;
- display: flex;
- justify-content: center;
- align-items: center;
- margin-left: -2px;
- border-radius: 3px;
+ .pdfBox-settingsButton-iconCont {
+ height: 60px;
+ width: 75px;
+ font-size: 30px;
+ }
+
+ .pdfBox-settingsButton-arrow {
+ height: 60;
+ border-top: 30px solid transparent;
+ border-bottom: 30px solid transparent;
+ border-right: 30px solid #121721;
+ }
}
+
+
.pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout,
.pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout {
- position: absolute;
- background: #323232;
- box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
- right: 20px;
- border-radius: 7px;
- padding: 20px;
- display: flex;
- flex-direction: column;
font-size: 30px;
- transition: all 0.5s;
}
- .pdfBox .pdfBox-ui .pdfBox-settingsCont,
- .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont {
- position: absolute;
- right: 0;
- top: 3;
- pointer-events: all;
- }
- .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-arrow,
- .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-arrow {
- width: 0;
- height: 60;
- border-top: 30px solid transparent;
- border-bottom: 30px solid transparent;
- border-right: 30px solid #121721;
- transition: all 0.5s;
- }
-
- .pdfBox .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-iconCont,
- .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-iconCont {
- background: #121721;
- height: 60px;
- width: 75px;
- display: flex;
- font-size: 30;
- position: relative;
- align-items: center;
- justify-content: center;
- border-radius: 3px;
- pointer-events: all;
- }
-
- .pdfBox .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-arrow,
- .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-arrow {
- width: 0;
- height: 0;
- border-top: 30px solid transparent;
- border-bottom: 30px solid transparent;
- border-right: 30px solid #121721;
- transition: all 0.5s;
- }
.pdfBox .pdfBox-ui .pdfBox-overlayCont,
.pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont {
- position: absolute;
- width: calc(100% - 40px);
height: 60px;
- background: #121721;
- bottom: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- overflow: hidden;
- transition: left .5s;
- pointer-events: all;
+
+ .pdfBox-searchBar {
+ font-size: 40px;
+ }
}
.pdfBox .pdfBox-ui .pdfBox-overlayButton,
.pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton {
- border-bottom-left-radius: 50%;
- display: flex;
- justify-content: space-evenly;
- align-items: center;
height: 60px;
- background: none;
- padding: 0;
- position: absolute;
- pointer-events: all;
- }
- .pdfBox .pdfBox-ui .pdfBox-overlayCont .pdfBox-searchBar,
- .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont .pdfBox-searchBar {
- width: 70%;
- font-size: 40px;
+ .pdfBox-overlayButton-iconCont {
+ height: 60px;
+ width: 75px;
+ font-size: 30;
+ }
+
+ .pdfBox-overlayButton-arrow {
+ border-top: 30px solid transparent;
+ border-bottom: 30px solid transparent;
+ border-right: 30px solid #121721;
+ }
}
button.pdfBox-search {
@@ -348,17 +289,8 @@
.pdfBox .pdfBox-ui .pdfBox-prevIcon,
.pdfBox-interactive .pdfBox-ui .pdfBox-nextIcon,
.pdfBox-interactive .pdfBox-ui .pdfBox-prevIcon {
- background: #121721;
height: 50px;
width: 50px;
font-size: 30px;
- display: flex;
- position: relative;
- align-items: center;
- justify-content: center;
- border-radius: 3px;
- pointer-events: all;
- padding: 0px;
}
-
-}
+} \ No newline at end of file
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 1261cbfdd..9f6af1bde 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -81,6 +81,7 @@
}
}
+// CSS adjusted for mobile devices
@media only screen and (max-device-width: 480px) {
.presBox-cont .presBox-buttons {
position: absolute;
@@ -92,37 +93,33 @@
z-index: 2;
align-items: center;
background: rgba(0, 0, 0, 0);
- padding-top: 5px;
- padding-bottom: 5px;
display: inline-flex;
+
+ .presBox-button {
+ margin-top: 5%;
+ height: 250;
+ width: 300;
+ font-size: 100;
+ display: flex;
+ align-items: center;
+ background: #323232;
+ color: white;
+ }
+
+ .presBox-viewPicker {
+ top: -70;
+ left: 2.5%;
+ height: 50;
+ width: 95%;
+ font-size: 30px;
+ position: absolute;
+ min-width: 50px;
+ }
}
.presBox-cont .presBox-listCont {
- position: absolute;
top: 50;
height: calc(100% - 80px);
- width: 100%;
- }
-
- .presBox-cont .presBox-buttons .presBox-button {
- margin-top: 5%;
- height: 250;
- width: 300;
- font-size: 100;
- display: flex;
- align-items: center;
- background: 323232;
- color: white;
- }
-
- .presBox-cont .presBox-buttons .presBox-viewPicker {
- top: -70;
- left: 2.5%;
- height: 50;
- width: 95%;
- font-size: 30px;
- position: absolute;
- min-width: 50px;
}
.input,
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 79532995e..0632f6a8b 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -109,89 +109,43 @@
@media only screen and (max-device-width: 480px) {
.presElementBox-buttons {
display: inline-flex;
- position: relative;
- width: 100%;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 3;
+ width: 50%;
+
+ .presElementBox-interaction {
+ width: 50;
+ height: 50;
+ }
+
+ .presElementBox-interaction-selected {
+ width: 50;
+ height: 50;
+ }
}
.presElementBox-item {
display: inline-flex;
+ height: max-content;
overflow: hidden;
}
- .presElementBox-buttons .presElementBox-interaction {
- color: gray;
- float: left;
- padding: 0px;
- width: 50;
- height: 50;
- }
-
- .presElementBox-buttons .presElementBox-interaction-selected {
- color: white;
- float: left;
- padding: 0px;
- width: 50;
- height: 50;
- border: solid 1px darkgray;
- }
-
.presElementBox-closeIcon {
- border-radius: 20px;
transform: scale(1.5);
- position: absolute;
right: 10;
top: 10;
- padding: 8px;
- }
-
- .presElementBox-buttons {
- display: inline-flex;
- position: absolute;
- top: 0;
- right: 0;
- z-index: 3;
- width: 50%;
}
.presElementBox-name {
font-size: 30px;
- position: absolute;
- display: inline-block;
top: 10px;
z-index: 3;
width: 50%;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: pre;
- }
-
- .presElementBox-item {
- display: inline-block;
- background-color: #eeeeee;
- pointer-events: all;
- width: 100%;
- min-height: 100%;
- height: max-content;
- outline-color: maroon;
- outline-style: dashed;
- border-radius: 6px;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- transition: all .1s;
- padding: 0px;
- padding-bottom: 3px;
}
.presElementBox-embedded {
- position: relative;
- display: flex;
transform: translate(0, 90px) scale(1.5);
- width: auto;
- justify-content: center;
- margin: auto;
}
} \ No newline at end of file