When on mobile do not rely on background position and instead add
img element so we can properly resize it and adjust it:
- Less in your face
- To not disturb or overshadow the actual active elements
When on Classic mode:
- Hamburger items: Use smaller lockers so to do not get in the way
of reading the actual item label
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I46218254a975b3a70d1e4c03eb1795d87f3861c9
specifically more focus on the top toolbar in classic mode
Signed-off-by: Pranam Lashkari <lpranam@collabora.com>
Change-Id: I33eebe79addebe3acfcea4d20912cc31b759ffce
Mobile:
- Checks if we are in presence of mobile mode and adjust layout
accordingly based on class
- Makes sure that the illustration resizes
depending on device's size
- Adds subtle animation to get the user excited or at least curious to
tap it (avoids making the disable status to dimmed/not legible)
- Fixes layout and buttons
Desktop:
- Adds hover state not only to button but to the locker
- Makes locker a discreet overlay above the respective button, suggesting
"this button is locked" but make it react so user is willing to click to
discover what is it
- Added CSS rules for top toolbar
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Idbe66746c5ad07647cd62eb94d3b22a840bf70d7
Do not use external html file and instead use input attribute from vex
so we can send html while being able to use variables (those variables
should then be overwritten by integrator)
Also Fix styling and DOM elements creation:
- Avoid to many elements and messy notebookbar with multiple (states)
- Replace disabled feature icon with lock icon
- Also style it properly and make it similar in other properties as
the existent disable status
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I9c2a07ef1fe5f089d5e63cb53d2d6b7f0b5083a8
- replace old random top value with half if its height
- fix height (to be the same as the neighboring parents)
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I738ca92b78daa4db773fe4dce6f1dd3d29001403
- Desktop:
- Shortcuts is now centered
- Avoid setting hard min width for document title
- Tablet: Better presentation when on read only mode
- Document name is now fully visible using all available space
- Fix layout when on using tablet in portrait
- When editing:
- All top elements are now vertically centered
- Document name uses better the available space
- Tablet: document-name-input: Fix shadow on iOS
- Safari was overriding it with its own styles
- Generic:
- Document name: do not use ellipsis if the text fits
when porting this please be sure that 81a5d029e was reverted first
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I82abe930ba5e26c004b387fbf4047de8412b8a36
from nav when in edit mode (keep margins when on readonly mode)
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I83923bbb34e34c20daa81e80c5832778faab8e1b
- Avoid having multiple document-header elements when on notebookbar
- Add classes to the main-nav element when in presence of Readonly
Change-Id: I82cb816fcfa28d790202c96484a7e8c99f3875f6
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/103004
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
- Fix duplicated properties (ignore cases where it's needed
for browser compatibility);
- Fix space inconsistencies before !
- Fix space inconsistencies after colon
- Fix space inconsistencies after and before combinator (>, +, ~)
- Invalid calc
- Many rules added to json, namely no-extra-semicolons
Change-Id: I78af6bc546aeb1d7d7090e2ef278c895f0393a07
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/102289
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
- Detected many duplicated selectors within the same file (squashed them)
- Detected inconsistency (sometimes spaces sometimes tabs). Tabify as in JS.
- Detected quotes' inconsistency (sometimes none, sometimes '', sometimes ""). Use '' as in JS
- Avoid touching on files from 3rd party sources (jquery, w2ui), ignore files
Change-Id: Idd82945f29ac6c5c9f522e5d5df4a783a367654d
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/102009
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
* convert var colors to rgb
* use the var colors for shadow + alpha (rgba)
* .document-title container: remove table display and add min width
Change-Id: Id4289af91562790edd23c83d4e70a16688e44fe3
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/101048
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
* increase distinction between disabled and enabled buttons,
* make the Selected buttons to use the same main blue color
* make the Selected buttons with text to change their text color as well
* Use --gray-bg-color across all files
Change-Id: I50b8ab86216211de37ef6c4d2b2c6baddc783ae7
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/99349
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
- Overall styling
- Fix tab’ alignment and paddings
- Fix tabs’ states
- Make use of text-shadow to emphasize instead of changing font-weight in order to avoid changes in size
- Add document-type class in notebookbar (similar to what I did for menubar)
- Style jquery-ui tooltips
- Style .unolabel
- Start to use css --var for font and colors (still no changes in the code per sea [like reducing the values etc] just start using it)
-- add comments
-- Use it depending on doc-type for notebookbar tab unolabel
- Add missing icons
- Fix extra border (toolbar-wrapper)
- Add document-header
Change-Id: I24552b118657d8ead47a74a6d189bd2448aac808
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/98721
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
by reducing the value introduced in db32e4fc38 and instead using the same z-index as its neighbour elment (main-menu) so 1000
Change-Id: I92d893d1a092e16a1455a6d1941a98e73ec63d1a
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/95103
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
Revert more of b62dcc0255, and also
revert 418181411f.
Now I seem to get a visualViewport with scale 1 and width 768
consistently, which is a relief.
Change-Id: Ia619a51047dd2a05ba32d6a203c3095198d3b4d5
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91436
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Tor Lillqvist <tml@collabora.com>
I now think that much of our media queries with (max-device-height:
767px) actually should use (max-device-width: 767px) if the intent is
that they detect the case of mobile phones, as opposed to tablets.
Many mobile phones have a screen.height (which is what
max-device-height in CSS refers to) that is clearly larger than 767.
But a screen.width of 768 is what at least my 9.7 iPad has.
Change-Id: I3b44e32ec583837897b4aa390fc0ab92be59d163
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/90752
Tested-by: Andras Timar <andras.timar@collabora.com>
Reviewed-by: Andras Timar <andras.timar@collabora.com>
to respect the height of toolbar-up as well as the main-nav element; Set 0 vertical paddings for the toolbar-up.
Change-Id: I4951b47a5c8b4fb34285c45b2ef9765245068b4a
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/90253
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Tested-by: Pedro Pinto da Silva <pedro.silva@collabora.com>
Reviewed-by: Pedro Pinto da Silva <pedro.silva@collabora.com>
It should be 'screen and ...', but since the other rules don't have
this additional screen condition, I just remove it.
Change-Id: Idabf28fbee303e19f1a5f5c75f3eb5e7387ac3fa
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/89170
Tested-by: Tamás Zolnai <tamas.zolnai@collabora.com>
Reviewed-by: Tamás Zolnai <tamas.zolnai@collabora.com>
Restore the media rules we used earlier for mobiles.
So for mobiles it's enough to have a small screen size,
for tablet we allow bigger screen size, but only with
special pointer properties.
Change-Id: Ic45f05c516ec44cd39c58463d8bf1907ec63c25a
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/88922
Tested-by: Tamás Zolnai <tamas.zolnai@collabora.com>
Reviewed-by: Tamás Zolnai <tamas.zolnai@collabora.com>
- Include phablet size
- Ensure that the mobile css rules do not kick in when on Desktop (900px window)
-- Detect if the primary input mechanism cannot hover at all or cannot conveniently hover (hover:none)
-- Detect if at least one input mechanism includes a pointing device of limited accuracy (any-pointer:coarse)
Change-Id: Idf1494acbd52ecd40e9082c8cf6f4ce88ecf9ac6
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/88862
Tested-by: Pedro Pinto da Silva <pedro.silva@collabora.com>
Reviewed-by: Pedro Pinto da Silva <pedro.silva@collabora.com>
- mobilewizard rules both from toolbar.css and toolbar-mobile.css to mobilewizard.css
- Hamburger menu rules from menubar.css to menubar-mobile.css
- scrollbar rules from toolbar-mobile.css to scrollBar.css and add media query
- and remove unecessary comments
Change-Id: I5372455ba723d334472b14df556825b1a3734922
Reviewed-on: https://gerrit.libreoffice.org/82298
Reviewed-by: Pedro Pinto da Silva <pedro.silva@collabora.com>
Tested-by: Pedro Pinto da Silva <pedro.silva@collabora.com>
