Skip to content
Permalink
Browse files
Fixed some CSS rendering issues.
- Some of the sytles were not being included for some reason (gradient background images on table cells, today color, etc.)
- Converted the code style to more "if" blocks rather than one long run-on echo statement.  Resulting text looks slightly more like a normal CSS file and is (for me at least) easier to read.
  • Loading branch information
craigk5n committed Aug 12, 2017
1 parent 2039526 commit 19a51272c868635ec345aeebaf7ab2cef4b208fa
Showing 1 changed file with 71 additions and 62 deletions.
@@ -5,7 +5,6 @@
* @author Craig Knudsen <cknudsen@cknudsen.com>
* @copyright Craig Knudsen, <cknudsen@cknudsen.com>, http://www.k5n.us/cknudsen
* @license http://www.gnu.org/licenses/gpl.html GNU GPL
* @version $Id: styles.php,v 1.9.2.1 2013/08/12 16:18:52 cknudsen Exp $
* @package WebCalendar
*
* HOW TO READ THIS DOCUMENT
@@ -135,120 +134,131 @@
need to go through "css_cacher.php". */

/* ":root" matches top-level, usually "html". */
echo ':root {
/* Leave font-size as "px" here and "rem" should scale properly everywhere else. */
?>
:root {
<?php /* Leave font-size as "px" here and "rem" should scale properly everywhere else. */ ?>
--def-font-size: 16px;
--def-font-family: sans-serif;

--box-default-color: #888888;

--bgcolor: ' . $GLOBALS['BGCOLOR'] . ';
--bgimage: ' . $GLOBALS['BGIMAGE'] . ';
--bgrepeat: ' . $GLOBALS['BGREPEAT'] . ';
--captions: ' . $GLOBALS['CAPTIONS'] . ';
--cellbg: ' . $GLOBALS['CELLBG'] . ';
--fonts: ' . $GLOBALS['FONTS'] . ';
--h2color: ' . $GLOBALS['H2COLOR'] . ';
--haseventsbg: ' . $GLOBALS['HASEVENTSBG'] . ';
--minicalfont: ' . $GLOBALS['MINICALFONT'] . ';
--minicalwidth: ' . $GLOBALS['MINICALWIDTH'] . ';
--myevents: ' . $GLOBALS['MYEVENTS'] . ';
--nextmonthbg: ' . $GLOBALS['NEXTMONTHBG'] . ';
--othermonthbg: ' . $GLOBALS['OTHERMONTHBG'] . ';
--popupfg: ' . $GLOBALS['POPUP_FG'] . ';
--popupbg: ' . $GLOBALS['POPUP_BG'] . ';
--prevmonthbg: ' . $GLOBALS['PREVMONTHBG'] . ';
--tablebg: ' . $GLOBALS['TABLEBG'] . ';
--textcolor: ' . $GLOBALS['TEXTCOLOR'] . ';
--thbg: ' . $GLOBALS['THBG'] . ';
--thfg: ' . $GLOBALS['THFG'] . ';
--todaycellbg: ' . $GLOBALS['TODAYCELLBG'] . ';
--weekendbg: ' . $GLOBALS['WEEKENDBG'] . ';
--weeknumber: ' . $GLOBALS['WEEKNUMBER'] . ';
}' .
/* TODO: I think these two, among others, may be too specific.
Do they really need "#month"?
And, instead of IDs "#nextmonth" and "#prevmonth", would classes ".next" and ".prev" work? */
( $DISPLAY_TASKS != 'Y' ? '
--bgcolor: <?php echo $GLOBALS['BGCOLOR']?>;
--bgimage: <?php echo$GLOBALS['BGIMAGE']; ?>;
--bgrepeat: <?php echo$GLOBALS['BGREPEAT']; ?>;
--captions: <?php echo$GLOBALS['CAPTIONS']; ?>;
--cellbg: <?php echo$GLOBALS['CELLBG']; ?>;
--fonts: <?php echo$GLOBALS['FONTS']; ?>;
--h2color: <?php echo$GLOBALS['H2COLOR']; ?>;
--haseventsbg: <?php echo$GLOBALS['HASEVENTSBG']; ?>;
--minicalfont: <?php echo$GLOBALS['MINICALFONT']; ?>;
--minicalwidth: <?php echo$GLOBALS['MINICALWIDTH']; ?>;
--myevents: <?php echo$GLOBALS['MYEVENTS']; ?>;
--nextmonthbg: <?php echo$GLOBALS['NEXTMONTHBG']; ?>;
--othermonthbg: <?php echo$GLOBALS['OTHERMONTHBG']; ?>;
--popupfg: <?php echo$GLOBALS['POPUP_FG']; ?>;
--popupbg: <?php echo$GLOBALS['POPUP_BG']; ?>;
--prevmonthbg: <?php echo$GLOBALS['PREVMONTHBG']; ?>;
--tablebg: <?php echo$GLOBALS['TABLEBG']; ?>;
--textcolor: <?php echo$GLOBALS['TEXTCOLOR']; ?>;
--thbg: <?php echo$GLOBALS['THBG']; ?>;
--thfg: <?php echo$GLOBALS['THFG']; ?>;
--todaycellbg: <?php echo$GLOBALS['TODAYCELLBG']; ?>;
--weekendbg: <?php echo$GLOBALS['WEEKENDBG']; ?>;
--weeknumber: <?php echo$GLOBALS['WEEKNUMBER']; ?>;
}
<?php
// TODO: I think these two, among others, may be too specific.
// Do they really need "#month"?
// And, instead of IDs "#nextmonth" and "#prevmonth", would classes ".next" and ".prev" work?
if ( $DISPLAY_TASKS != 'Y' ) { ?>
#month #nextmonth {
float: right;
}
#month #prevmonth {
float: left;
}
' : '' ) . '#minicalendar table {
width: ' . ( empty( $GLOBALS['MINICALWIDTH'] )
? '10em' : $GLOBALS['MINICALWIDTH'] ) . ';
<?php } ?>

#minicalendar table {
width: <?php echo empty( $GLOBALS['MINICALWIDTH'] )
? '10em' : $GLOBALS['MINICALWIDTH']; ?>;
}
' . ( $MENU_ENABLED == 'N' ? '#dateselector form {
border-top: 0.0625em solid ' . $GLOBALS['TABLEBG'] . ';

<?php if ( $MENU_ENABLED == 'N' ) { ?>
#dateselector form {
border-top: 0.0625em solid <?php echo $GLOBALS['TABLEBG'];?>;
}
' : '' ) . '
body {' . ( empty( $GLOBALS['BGIMAGE'] )
? '' : '
background-image: url( ' . $GLOBALS['BGIMAGE'] . ' );
background-repeats: ' . $GLOBALS['BGREPEAT'] );
';
<?php } ?>

<?php if ( ! empty ( $GLOBALS['BGIMAGE'] ) ) { ?>
body {
background-image: url( '<php echo $GLOBALS['BGIMAGE'];?>' );
background-repeats: '<?php echo$GLOBALS['BGREPEAT'];?>' );
}
.popup {
' . background_css( $GLOBALS['POPUP_BG'], 200 ) . '
<?php echo background_css( $GLOBALS['POPUP_BG'], 200 ); ?>
}
<?php } ?>
.main th,
.main th.weekend {
' . background_css( $GLOBALS['THBG'], 15 ) . '
<?php echo background_css( $GLOBALS['THBG'], 15 );?>
}
.main td {
' . background_css( $GLOBALS['CELLBG'], 100 ) . '
<?php echo background_css( $GLOBALS['CELLBG'], 100 ); ?>
}
.main td.weekend {
' . background_css( $GLOBALS['WEEKENDBG'], 100 ) . '
}' . ( $GLOBALS['HASEVENTSBG'] != $GLOBALS['CELLBG'] ? '
<?php echo background_css( $GLOBALS['WEEKENDBG'], 100 ); ?>
}
<?php if ( $GLOBALS['HASEVENTSBG'] != $GLOBALS['CELLBG'] ) { ?>
.main td.hasevents {
' . background_css( $GLOBALS['HASEVENTSBG'], 100 ) . '
}' : '' ) . '
<?php echo background_css( $GLOBALS['HASEVENTSBG'], 100 ); ?>
}
<?php } ?>
.main td.othermonth {
' . background_css( $GLOBALS['OTHERMONTHBG'], 100 ) . '
<?php echo background_css( $GLOBALS['OTHERMONTHBG'], 100 ); ?>
}
.main td.today, #datesel td #today {
' . background_css( $GLOBALS['TODAYCELLBG'], 100 ) . '
<?php echo background_css( $GLOBALS['TODAYCELLBG'], 100 ); ?>
}
#admin .main td.weekcell,
#month .main td.weekcell,
#pref .main td.weekcell,
#viewl .main td.weekcell {
' . background_css( $GLOBALS['THBG'], 50 ) . '
<?php echo background_css( $GLOBALS['THBG'], 50 ); ?>
}
.glance td,
.note {
' . background_css( $GLOBALS['CELLBG'], 50 ) . '
<?php echo background_css( $GLOBALS['CELLBG'], 50 );?>
}
#viewt .main th.weekend {
' . background_css( $GLOBALS['WEEKENDBG'], 15 ) . '
<?php echo background_css( $GLOBALS['WEEKENDBG'], 15 );?>
}
#login table,
#register table {
' . background_css( $GLOBALS['CELLBG'], 200 ) . '
<?php echo background_css( $GLOBALS['CELLBG'], 200 );?>
}
#securityAuditNotes {
' . background_css( $GLOBALS['CELLBG'], 150 ) . '
<?php echo background_css( $GLOBALS['CELLBG'], 150 );?>
}
#viewt td.entry {
' . background_css( $GLOBALS['THBG'], 10 ) . '
<?php echo background_css( $GLOBALS['THBG'], 10 );?>
}
#minicalendar th,
#minicalendar td {
font-size: ' . ( empty( $GLOBALS['MINICALFONT'] )
? '0.6875em' : $GLOBALS['MINICALFONT'] ) . ';
font-size: <?php echo ( empty( $GLOBALS['MINICALFONT'] )
? '0.6875em' : $GLOBALS['MINICALFONT'] ); ?>;
}
' . ( $DISPLAY_WEEKENDS == 'N' ? '#viewt .main tr.weekend,
<?php if ( $DISPLAY_WEEKENDS == 'N' ) { ?>
#viewt .main tr.weekend,
.main th.weekend,
.main td.weekend,
.minical th.weekend,
.minical td.weekend {
display: none;
}
' : '' );
<?php } ?>

<?php
if ( $CATEGORIES_ENABLED === 'Y' ) {
// Need to load user variables so that $is_admin is set before we load
// categories.
@@ -284,5 +294,4 @@
}
}
}

?>

7 comments on commit 19a5127

@bbannon
Copy link
Contributor

@bbannon bbannon commented on 19a5127 Aug 12, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Craig, a couple of questions;

  1. Isn't there supposed to be a space after echo?
  2. Do you realize that all that jumping in and out of PHP adds more than a second to the load time? And this is a small file.

@craigk5n
Copy link
Owner Author

@craigk5n craigk5n commented on 19a5127 Aug 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the echo, not sure which line you are referring to. Perhaps you can add a comment right on that line above?

Regarding performance, what are you using to check loading speed? See the screenshot below from the Chrome developer tools. The complete load time for styles.php (blue arrow) is 353 ms while the load time for visible.php (red line) is 452 ms. It looks like the browser waits for the slowest response before loading all the other assets. That makes me think loading styles.php faster won't load the page faster unless we also make visible.php faster. Note that this is running WebCalendar on an old 2012 MacBook Air laptop inside a docker container.... not a speedy setup.

image

I also tried using the unix time command to see how long it takes to compile styles.php. See the results in the below screenshot. The compile takes less than 100 ms every time.

image

So, my thinking is that the performance here is sufficient. It looks like adding normalize.css adds a 200ms DNS lookup delay also. But it seems like chrome keeps loading other things while it waits on that, so also not a big deal.

@bbannon
Copy link
Contributor

@bbannon bbannon commented on 19a5127 Aug 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The diff file listed here for the merge. Most of the echos you put in were like "echo$GLOBALS[]"; no space.

For load speed, I used Firefox with what used to be called Firebug but, it's built in now.
On six tries each, the "runon echo" was 1009 - 1013 ms faster than yours with all the lines.
It looks like you're getting much better speed. Even the long echo was .09 - .1 longer than what you got.
So, maybe it's just my system. It is an old business refurb, like 6 years old when I got it. What did I expect for $75?

Yes, normalize.css causes a speed bump as well. It seemed worth it to me to make IE<10 behave.
There are also a couple of lines to "standardize" chrome and others. But, mostly IE.

js/visible.php shouldn't be a php file at all. There's just one php line; etranslate('Invalid Color').
Not counting the "<script></script>" tag setup which shouldn't be necessary in a pure js file.
That's sort of where I was going with js/translate.js.php; getting all the php out of otherwise pure javascript. But, that's getting a lot longer than I anticipated. Maybe it should just be broken down to the individual calls to the .js files. I mean, <script> the php variables </script> in the file that calls the ordinary .js file.

@craigk5n
Copy link
Owner Author

@craigk5n craigk5n commented on 19a5127 Aug 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah ok. Did not intend to omit the white space there.... guess it still works :-)

@bbannon
Copy link
Contributor

@bbannon bbannon commented on 19a5127 Aug 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmmm... I'm discovering that html doesn't always show up here.
The line above; "than yours with all the lines" should be
than yours with all the &lt?php ?&gt lines"

@craigk5n
Copy link
Owner Author

@craigk5n craigk5n commented on 19a5127 Aug 14, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you using markdown for your comments?

@bbannon
Copy link
Contributor

@bbannon bbannon commented on 19a5127 Aug 15, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'markdown'? Maybe. I just type in here and submit.

Please sign in to comment.