by remove the defined heigt, the dynamic (full) height will be used.
Signed-off-by: Andreas-Kainz <kainz.a@gmail.com>
Change-Id: I31d868c7e3a5232f994794af3393fc91ef2f14cc
Initially we had only a simple text label with an outline but due to
user feedback we end up increasing its contrast and displaying the input
field outline as a box plus adding an icon so to emphasize that it's
possible to edit the document. See this for context:
https://github.com/CollaboraOnline/online/issues/2310
Since this feature is not new to our user base:
This change aims to
- Fix some quirkiness of that component (too heavy element floating
in the toolbar)
- Getting rid of pencil icon inside of input field
- Which avoid problems in responsive mode (cropping pencil icon) and
- helps to use the space more efficiently
- Helps users understanding that we are still in presence of something
more than a simple static label
- by keep it with a white background and with a hover state
- Improves look and feel
- Use the same size as used for tabs
- Use app color
- Use rounded corners so to appear less bulky
- and so it looks like the title of the window (text centered aligned)
- on hover shows shadow (is clickable)
- on focus text is left aligned and outline appears, showing that
is ready for accepting key strokes
- Also changes on device-tablet.css fixes
- cropped or juxtaposition of document name and close button
- easier to interact with the document name input field on a tablet
- This affects both Notebookbar and Classic mode
- When in classic mode use the same font-size as the neighboring
elements (10pt)
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Iff17b32bf9cf95968fdb387de856b377a23a116a
- 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
- 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>
- make sure avatar container is set to content-box instead of border-box
Change-Id: I342f01136bee99a0154527f34703b323cd62aeb5
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/101381
Tested-by: Andras Timar <andras.timar@collabora.com>
Reviewed-by: Andras Timar <andras.timar@collabora.com>
The problem is that the @media-based detection often disagrees with the
JS-based detection which then leads to many problems - most notably that
part of the UI behaves as if it was a tablet, and the other part as if
was a mobile phone, leading to a terrible user experience.
This commit changes it so that there is only one way how to detect if
we are on mobile phone, tablet or desktop: using the JavaScript, and we
will load the appropriate css accordingly.
Only one @media-based rule is converted as an example, the rest will
follow.
Change-Id: Id7bfb58ca12264904b3329db1542ae6b54893f11
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91416
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Tamás Zolnai <tamas.zolnai@collabora.com>
Reviewed-by: Jan Holesovsky <kendy@collabora.com>
