robertdown wrote on Friday, July 25, 2014:
Let’s try this once more… here’s the updated left_nav page and main_title pages - this time they’ve been kept up the master branch.
bradymiller wrote on Saturday, July 26, 2014:
Hi,
Linked the following “Up For Grabs” demo to Robert’s code above:
http://www.open-emr.org/wiki/index.php/Development_Demo#192.168.1.132
-brady
OpenEMR
deschel wrote on Saturday, July 26, 2014:
Appearance is nice.
There is a mild functionality issue. The items in the left nav list are a bit spaced out so that if some of the menus are expanded, you have to scroll down to see items at the bottom of the list. Is it possible to make that items closer together (vertically) so that almost all of the menu can be seen when items like administration are expanded?
David
robertdown wrote on Friday, August 01, 2014:
There are just too many items in the nav to get them all to fit on a screen, plus there is no reasonable way to determine the resolution of the user. Someone working on a 1024x768 screen will see considerably less of the page than someone working on a 1920x1080 screen. The sub-items will be getting a bit smaller, but scrolling is going to happen to matter what - it’s just the shear volume of the items.
bradymiller wrote on Saturday, September 06, 2014:
Some things to help with review.
List of modified files:
interface/main/left_nav.php
interface/main/main_title.php
List of new files:
interface/themes/app.css
library/ui/font-awesome-4.1.0/css/font-awesome.css
library/ui/font-awesome-4.1.0/css/font-awesome.min.css
library/ui/font-awesome-4.1.0/fonts/FontAwesome.otf
library/ui/font-awesome-4.1.0/fonts/fontawesome-webfont.eot
library/ui/font-awesome-4.1.0/fonts/fontawesome-webfont.svg
library/ui/font-awesome-4.1.0/fonts/fontawesome-webfont.ttf
library/ui/font-awesome-4.1.0/fonts/fontawesome-webfont.woff
library/ui/font-awesome-4.1.0/less/bordered-pulled.less
library/ui/font-awesome-4.1.0/less/core.less
library/ui/font-awesome-4.1.0/less/fixed-width.less
library/ui/font-awesome-4.1.0/less/font-awesome.less
library/ui/font-awesome-4.1.0/less/icons.less
library/ui/font-awesome-4.1.0/less/larger.less
library/ui/font-awesome-4.1.0/less/list.less
library/ui/font-awesome-4.1.0/less/mixins.less
library/ui/font-awesome-4.1.0/less/path.less
library/ui/font-awesome-4.1.0/less/rotated-flipped.less
library/ui/font-awesome-4.1.0/less/spinning.less
library/ui/font-awesome-4.1.0/less/stacked.less
library/ui/font-awesome-4.1.0/less/variables.less
library/ui/font-awesome-4.1.0/scss/_bordered-pulled.scss
library/ui/font-awesome-4.1.0/scss/_core.scss
library/ui/font-awesome-4.1.0/scss/_fixed-width.scss
library/ui/font-awesome-4.1.0/scss/_icons.scss
library/ui/font-awesome-4.1.0/scss/_larger.scss
library/ui/font-awesome-4.1.0/scss/_list.scss
library/ui/font-awesome-4.1.0/scss/_mixins.scss
library/ui/font-awesome-4.1.0/scss/_path.scss
library/ui/font-awesome-4.1.0/scss/_rotated-flipped.scss
library/ui/font-awesome-4.1.0/scss/_spinning.scss
library/ui/font-awesome-4.1.0/scss/_stacked.scss
library/ui/font-awesome-4.1.0/scss/_variables.scss
library/ui/font-awesome-4.1.0/scss/font-awesome.css
library/ui/font-awesome-4.1.0/scss/font-awesome.scss
library/ui/font-awesome-latest/css/font-awesome.css
library/ui/font-awesome-latest/css/font-awesome.min.css
library/ui/font-awesome-latest/fonts/FontAwesome.otf
library/ui/font-awesome-latest/fonts/fontawesome-webfont.eot
library/ui/font-awesome-latest/fonts/fontawesome-webfont.svg
library/ui/font-awesome-latest/fonts/fontawesome-webfont.ttf
library/ui/font-awesome-latest/fonts/fontawesome-webfont.woff
library/ui/font-awesome-latest/less/bordered-pulled.less
library/ui/font-awesome-latest/less/core.less
library/ui/font-awesome-latest/less/fixed-width.less
library/ui/font-awesome-latest/less/font-awesome.less
library/ui/font-awesome-latest/less/icons.less
library/ui/font-awesome-latest/less/larger.less
library/ui/font-awesome-latest/less/list.less
library/ui/font-awesome-latest/less/mixins.less
library/ui/font-awesome-latest/less/path.less
library/ui/font-awesome-latest/less/rotated-flipped.less
library/ui/font-awesome-latest/less/spinning.less
library/ui/font-awesome-latest/less/stacked.less
library/ui/font-awesome-latest/less/variables.less
library/ui/font-awesome-latest/scss/_bordered-pulled.scss
library/ui/font-awesome-latest/scss/_core.scss
library/ui/font-awesome-latest/scss/_fixed-width.scss
library/ui/font-awesome-latest/scss/_icons.scss
library/ui/font-awesome-latest/scss/_larger.scss
library/ui/font-awesome-latest/scss/_list.scss
library/ui/font-awesome-latest/scss/_mixins.scss
library/ui/font-awesome-latest/scss/_path.scss
library/ui/font-awesome-latest/scss/_rotated-flipped.scss
library/ui/font-awesome-latest/scss/_spinning.scss
library/ui/font-awesome-latest/scss/_stacked.scss
library/ui/font-awesome-latest/scss/_variables.scss
library/ui/font-awesome-latest/scss/font-awesome.css
library/ui/font-awesome-latest/scss/font-awesome.scss
library/ui/foundation-5.3.1/css/foundation.css
library/ui/foundation-5.3.1/css/foundation.min.css
library/ui/foundation-5.3.1/css/normalize.css
library/ui/foundation-5.3.1/humans.txt
library/ui/foundation-5.3.1/img/.gitkeep
library/ui/foundation-5.3.1/index.html
library/ui/foundation-5.3.1/js/foundation.min.js
library/ui/foundation-5.3.1/js/foundation/foundation.abide.js
library/ui/foundation-5.3.1/js/foundation/foundation.accordion.js
library/ui/foundation-5.3.1/js/foundation/foundation.alert.js
library/ui/foundation-5.3.1/js/foundation/foundation.clearing.js
library/ui/foundation-5.3.1/js/foundation/foundation.dropdown.js
library/ui/foundation-5.3.1/js/foundation/foundation.equalizer.js
library/ui/foundation-5.3.1/js/foundation/foundation.interchange.js
library/ui/foundation-5.3.1/js/foundation/foundation.joyride.js
library/ui/foundation-5.3.1/js/foundation/foundation.js
library/ui/foundation-5.3.1/js/foundation/foundation.magellan.js
library/ui/foundation-5.3.1/js/foundation/foundation.offcanvas.js
library/ui/foundation-5.3.1/js/foundation/foundation.orbit.js
library/ui/foundation-5.3.1/js/foundation/foundation.reveal.js
library/ui/foundation-5.3.1/js/foundation/foundation.slider.js
library/ui/foundation-5.3.1/js/foundation/foundation.tab.js
library/ui/foundation-5.3.1/js/foundation/foundation.tooltip.js
library/ui/foundation-5.3.1/js/foundation/foundation.topbar.js
library/ui/foundation-5.3.1/js/vendor/fastclick.js
library/ui/foundation-5.3.1/js/vendor/jquery.cookie.js
library/ui/foundation-5.3.1/js/vendor/jquery.js
library/ui/foundation-5.3.1/js/vendor/modernizr.js
library/ui/foundation-5.3.1/js/vendor/placeholder.js
library/ui/foundation-5.3.1/robots.txt
library/ui/foundation-5.3.x/css/foundation.css
library/ui/foundation-5.3.x/css/foundation.min.css
library/ui/foundation-5.3.x/css/normalize.css
library/ui/foundation-5.3.x/humans.txt
library/ui/foundation-5.3.x/img/.gitkeep
library/ui/foundation-5.3.x/index.html
library/ui/foundation-5.3.x/js/foundation.min.js
library/ui/foundation-5.3.x/js/foundation/foundation.abide.js
library/ui/foundation-5.3.x/js/foundation/foundation.accordion.js
library/ui/foundation-5.3.x/js/foundation/foundation.alert.js
library/ui/foundation-5.3.x/js/foundation/foundation.clearing.js
library/ui/foundation-5.3.x/js/foundation/foundation.dropdown.js
library/ui/foundation-5.3.x/js/foundation/foundation.equalizer.js
library/ui/foundation-5.3.x/js/foundation/foundation.interchange.js
library/ui/foundation-5.3.x/js/foundation/foundation.joyride.js
library/ui/foundation-5.3.x/js/foundation/foundation.js
library/ui/foundation-5.3.x/js/foundation/foundation.magellan.js
library/ui/foundation-5.3.x/js/foundation/foundation.offcanvas.js
library/ui/foundation-5.3.x/js/foundation/foundation.orbit.js
library/ui/foundation-5.3.x/js/foundation/foundation.reveal.js
library/ui/foundation-5.3.x/js/foundation/foundation.slider.js
library/ui/foundation-5.3.x/js/foundation/foundation.tab.js
library/ui/foundation-5.3.x/js/foundation/foundation.tooltip.js
library/ui/foundation-5.3.x/js/foundation/foundation.topbar.js
library/ui/foundation-5.3.x/js/vendor/fastclick.js
library/ui/foundation-5.3.x/js/vendor/jquery.cookie.js
library/ui/foundation-5.3.x/js/vendor/jquery.js
library/ui/foundation-5.3.x/js/vendor/modernizr.js
library/ui/foundation-5.3.x/js/vendor/placeholder.js
library/ui/foundation-5.3.x/robots.txt
library/ui/foundation-latest/css/foundation.css
library/ui/foundation-latest/css/foundation.min.css
library/ui/foundation-latest/css/normalize.css
library/ui/foundation-latest/humans.txt
library/ui/foundation-latest/img/.gitkeep
library/ui/foundation-latest/index.html
library/ui/foundation-latest/js/foundation.min.js
library/ui/foundation-latest/js/foundation/foundation.abide.js
library/ui/foundation-latest/js/foundation/foundation.accordion.js
library/ui/foundation-latest/js/foundation/foundation.alert.js
library/ui/foundation-latest/js/foundation/foundation.clearing.js
library/ui/foundation-latest/js/foundation/foundation.dropdown.js
library/ui/foundation-latest/js/foundation/foundation.equalizer.js
library/ui/foundation-latest/js/foundation/foundation.interchange.js
library/ui/foundation-latest/js/foundation/foundation.joyride.js
library/ui/foundation-latest/js/foundation/foundation.js
library/ui/foundation-latest/js/foundation/foundation.magellan.js
library/ui/foundation-latest/js/foundation/foundation.offcanvas.js
library/ui/foundation-latest/js/foundation/foundation.orbit.js
library/ui/foundation-latest/js/foundation/foundation.reveal.js
library/ui/foundation-latest/js/foundation/foundation.slider.js
library/ui/foundation-latest/js/foundation/foundation.tab.js
library/ui/foundation-latest/js/foundation/foundation.tooltip.js
library/ui/foundation-latest/js/foundation/foundation.topbar.js
library/ui/foundation-latest/js/vendor/fastclick.js
library/ui/foundation-latest/js/vendor/jquery.cookie.js
library/ui/foundation-latest/js/vendor/jquery.js
library/ui/foundation-latest/js/vendor/modernizr.js
library/ui/foundation-latest/js/vendor/placeholder.js
library/ui/foundation-latest/robots.txt
bradymiller wrote on Saturday, September 06, 2014:
Regarding above list:
Why are you bringing in 2 versions of font-awesome and 3 versions of foundation?
What version is the interface/themes/app.css file coming from?
bradymiller wrote on Saturday, September 06, 2014:
Attached diff of the two modified files here to help with review.
blankev wrote on Saturday, September 06, 2014:
It gives the impression of a complete new version of OpenEMR. Widen the left menu a little (170 is OK for my Laptop screen) and the scrolling is less after a click on the patient’s options, to hide sub-options. It makes the list less long.
If it is hard to accomplish, the font could be one size smaller and still good to read.
CNTR-+ or CNRT-MINUS give a quick result in FireFox.
bradymiller wrote on Saturday, September 06, 2014:
Testing issues,
-
Agree with David that the scrolling presents a usability issue. Is there no way to make it more compact?
-
Showing the active patient and the active encounter links on the left_nav menu just exaggerate issue above in 1.
-
The icons are not always lining up with the labels on the menu. Sometimes they are below to the right of the label. This corrects if manually widen the menu.
-
The labels are not always fitting (get cut off to right). This corrects if manually widen the menu.
-
Is there a way to show that a label is a submenu rather than a link?
-
Recommend changing default theme to style_metal.css for new installs(in my eyes, looks better with this than the yellow).
-
Top frame New Patient link is broken. Also, this frame is missing the encounter shortcut menu. Also, the logged in user name appears to be a link. Also missing the Manual link.(Not saying they all have to be there; just noting they are missing)
-brady
blankev wrote on Saturday, September 06, 2014:
Name of Patient and DOB SS or whatever administration-number in the top-row is more like OpenEMR was. Easy for us that are used to tho old way of showing things.
bradymiller wrote on Saturday, September 06, 2014:
Regarding code,
-
Noted the removal of use ESign\Api; line at the top of left_nav.
-
Recommend sticking with current standard doctype. We opted not to go with a license tag to ensure kept language of license (especially allowing auto upgrade to next version of license). copyright tag is not supported by the docs creator and using category just disorganizes the docs output (recommend making package OpenEMR):
http://www.open-emr.org/wiki/index.php/How_to_Document_Your_Code_Properly#Page-Level_DocBlock
-brady
mdsupport wrote on Saturday, September 06, 2014:
Display of active pt DoB and/or at least age and list of encounters on top is very important during encounter.
robertdown wrote on Thursday, February 26, 2015:
Added the font-awesome library in the library/ folder and added the style_light directory to interface/themes/ directory plus the style_light.css to the interface/themes/ dir.
This commit is strictly a new theme, just CSS, no core files changed.
Still a work in progress, but definitely something for others to look at.
blankev wrote on Thursday, February 26, 2015:
Looks awesome! Now you are at it, would it be possible to work on Encounter Summary too?
When an encounter is activated there seems to be three options. (Basic settings)
Encounter Summary, Administration, Clinical
Encounter Summary is no menu option, it serves as a label. Took me some time to understand it is a LABEL and not a menu option. IMHO it should have a different size or a different color or something like a Menu starter. Some kind of indication it is not Click-able. Just a window dressing thing.
Could also be solved wit: Encounter Summary => (With an arrow)
blankev wrote on Thursday, February 26, 2015:
Administrative and Clinical are not translated… might need an xt() coding? Or is this done in Forms listings?
These labels are given in the Forms included in OpenEMR. All other new Forms will get the name Miscellaneous of the Nick name provided or can be included in Administrative and Clinical.
The Default for extra Forms registered does get translated.
mdsupport wrote on Friday, February 27, 2015:
Best lipstick ever for this pig. Thx Robert for the hard work.
fr4nkie wrote on Saturday, February 28, 2015:
Looking good! Thanks for the update. Glad to see this is still being worked on.
mdsupport wrote on Monday, April 06, 2015:
Finally got around to trying this out and it looks great. Few suggestion here :
-
we should introduce new themes that use full css3. Offices using old browsers could continue using legacy stylesheet(s).
-
Use “cascades” with multiple css files if necessary.
-
Add color(s) and font-size(s) as variables in personalization screen
-
Use <?php> code to bring in personalized values across all (new) stylesheets rather than creating multiple copies as blue/metal etc.
blankev wrote on Monday, April 06, 2015:
Want to know more about CSS3:(for us non-developers)
mdsupport wrote on Monday, April 06, 2015:
Few of the features that have helped us and possibilities community could consider are :
-
Use of transitions on display screens (e.g. patient summary) where widgets respond to hovering which allows us to use tablets rather than full laptops in exam rooms.
-
Use of self adjusting multiple columns in patient reports that get sent out and must look professional on par with other EMR packages.