Jump to content


Photo

Mobile friendly template...

html css js template

165 replies to this topic

#16 Shogun

Shogun

    Member

  • Members
  • PipPip
  • 10 posts
  • Gender:Male

Posted 07 June 2017 - 01:17 PM

TOS that bit worked beautifully, many thanks.  I added it to the master css from Braven and it targeted only the scoreboard like you said.

 

http://www81.myfanta...AGE13#hidebench

 

The scoreboard and submit lineup would be great additions to that template so my goal was to get them working so I could provide the master stylesheet and homepage/header additions for Braven to distribute if he liked.

 

Now I am only having some challenges with the Submit lineup module, again due to alignment.  Sometimes it is okay, sometimes it is not I am not sure why..I know you cant see this not logged in so maybe a screenshot would help explain, seems the starters and bench do not line up at the top - yet this looks ok on mobile platform.

 

http://imgur.com/a/6zuBm



#17 braven112

braven112

    Veteran

  • Members
  • PipPipPip
  • 1,173 posts
  • Location:mfladdons.com
  • Interests:Seatle Seahawks

Posted 07 June 2017 - 01:45 PM

to get the scoreboard looking properly , this is all you need to add to the style that isn't already provided in the scoreboard css files

#outerMFLScoreboardDiv table{width:100%;}
#outerMFLScoreboardDiv{border-radius: 4px;padding: 10px 5px;box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);background-color: #1f1f1f;}
#outerMFLScoreboardDiv .report-wrapper{padding:0;border-radius:0;box-shadow:none;background-color:none}
#outerMFLScoreboardDiv .MFLMainScoreboard td,#outerMFLScoreboardDiv #scoreboardHeader{text-align:center;} 

 

Braven could include this css in his master stylesheet , as it will only target the new scoreboard , the only thing he need to do is change the #outerMFLScoreboardDiv{ box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);background-color: #1f1f1f;} , depending on what color scheme

 

 

Great thanks!  I'll get this added tonight or tomorrow tonight.


MFLaddons.com, your home for MFL templates and graphics.

Visit MFL.football for a free mobile friendly MFL template.


#18 Shogun

Shogun

    Member

  • Members
  • PipPip
  • 10 posts
  • Gender:Male

Posted 07 June 2017 - 01:50 PM

 

to get the scoreboard looking properly , this is all you need to add to the style that isn't already provided in the scoreboard css files

#outerMFLScoreboardDiv table{width:100%;}
#outerMFLScoreboardDiv{border-radius: 4px;padding: 10px 5px;box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);background-color: #1f1f1f;}
#outerMFLScoreboardDiv .report-wrapper{padding:0;border-radius:0;box-shadow:none;background-color:none}
#outerMFLScoreboardDiv .MFLMainScoreboard td,#outerMFLScoreboardDiv #scoreboardHeader{text-align:center;} 

 

Braven could include this css in his master stylesheet , as it will only target the new scoreboard , the only thing he need to do is change the #outerMFLScoreboardDiv{ box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);background-color: #1f1f1f;} , depending on what color scheme

 

 

Great thanks!  I'll get this added tonight or tomorrow tonight.

 

You are the man Braven I already added this into the CSS local copy I snagged from you, once TOS and I can figure out the submit player alignment issue I was going to bundle it all together and share with you.  Any chance of adding an Ad Block to the template?



#19 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 953 posts
  • Gender:Male

Posted 07 June 2017 - 02:25 PM

Sometimes it is okay, sometimes it is not I am not sure why.

 
All the stuff they're making (scoreboard, popups, habman apps) is being coded to go over the new skins.
So when customizers don't use a skin, we have to overcompensate and find/change extra CSS to properly align or fix things.

#20 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,405 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 07 June 2017 - 03:46 PM

braven scratch that css , i installed your template , i'm adjusting your global.js file now and some other notes and will post when i'm done


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#21 braven112

braven112

    Veteran

  • Members
  • PipPipPip
  • 1,173 posts
  • Location:mfladdons.com
  • Interests:Seatle Seahawks

Posted 07 June 2017 - 03:47 PM

Shogun, that would be great. Post any code snippets here. Just like what TOS did as opposed to everything all bundled together. That makes it easy for me to include.

I'd also recommend using the @import rule to pull in my css file then overwrite and/or customize below. This way you'll always have the latest updates.

MFLaddons.com, your home for MFL templates and graphics.

Visit MFL.football for a free mobile friendly MFL template.


#22 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,405 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 07 June 2017 - 03:50 PM

i'm just unwrapping the div wrapper your placing on all reports for the lineup script and scoreboard script , when we can apply the same css to the container instead 


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#23 Shogun

Shogun

    Member

  • Members
  • PipPip
  • 10 posts
  • Gender:Male

Posted 07 June 2017 - 04:02 PM

Shogun, that would be great. Post any code snippets here. Just like what TOS did as opposed to everything all bundled together. That makes it easy for me to include.

I'd also recommend using the @import rule to pull in my css file then overwrite and/or customize below. This way you'll always have the latest updates.

 

Yep good call there.  I will wait on TOS' posting of what he is working on and then share what I can. 



#24 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,405 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 07 June 2017 - 04:46 PM

ok braven , here is what i have......

 

 

#1  I only noticed one instance of this in any of your html for the homepage messages , but you should make this small fix 

replace all instances of "&nbsp;"  with  "&#32;"  - homepage message #3 - for blank space in an <li></li>

explanation of the issue is here - http://forums.myfant...=35752&p=191662

 

 

#2  change all references to links to your server , image links , links to MFL pages , change from http://  and https://  to shorthand of //

example. If user adjust his settings to new SSL , then all will be good , if your server is not SSL , then the files may not work. This is a simple find and replace , i have already done so with the demo template i installed of yours.

http://mfl.football/assets/js/homepage.js
//mfl.football/assets/js/homepage.js

 

#3 i made some changes to your global js file , i used the jQuery long hand method on the outer function/doc ready , and inside used shorthand $ , this will insure that MFL mootools won't conflict with anything. I also unwrapped the inner report-wrapper that you applied to all reports for the lineup script and scoreboard script containers. Here is revised global.js

jQuery(document).ready(function() {
  //Update standings accronyms
  $('th.divpct').text('Div %');
  $('th.all_play_wlt').text('All-Play');
  $('th.h2hpct').text('%');
  //hambuger menu
  $('.myfantasyleague_menu > label span').html('<span class="top-bun"></span><span class="burger"></span><span class="double-burger"></span><span class="bottom-bun"></span>');

  //turn hints into new style
  $(".reportnavigation:contains('Hint:')").removeClass().addClass('alert alert-info');
  $(".reportnavigation:contains('Weekly NFL Injury Status is in this color.')").hide();

  //customer wrapper
  $(".report").wrap("<div class='report-wrapper'></div>");
  $("#outerMFLScoreboardDiv .report-wrapper .report,#lineup-form .report-wrapper .report").unwrap();

  //remove empty td's on add/drop page
  $("#body_options_43 td").filter(function() {

    var html = $(this).html();

    if (html == '' || html == ' ')
      return true;

  }).remove();
  //remove empty td's on draft page
  $("#body_options_52 td[colspan='3'] table > td").filter(function() {

    var html2 = $(this).html();

    if (html2 == '' || html2 == ' ')
      return true;

  }).addClass("empty");
});

///// Custom Tabs //////////////////
jQuery('.tabbed-reports li').on('click',function(e){
    $('.reports-content>.'+ e.target.classList[0]).show().siblings().hide();
});

var selector = '.tabbed-reports li';

jQuery(selector).on('click', function(){
    $(this).parent().find('li').removeClass('active');
    $(this).parent().find('li').removeClass('current');
    $(this).addClass('active');
});

 

homepage.js

jQuery('#curr_auctions').prepend($('#curr_auctions .reportfooter:last'));
jQuery("#curr_auctions .reportfooter td[colspan=3]").attr('colspan',4);
jQuery("#curr_auctions .reportfooter:first").removeClass().addClass('btn-primary');

//swap out chat icon
jQuery('#league_chat caption span a').html('<svg class="icon-comments"><use xlink:href="#icon-comments"></use></svg>');

//Move login button info
jQuery('.welcome').children().detach().appendTo('#loginlink .svg-text');
jQuery('#loginlink .svg-text a').eq(1).addClass('commish-link');

 

 

 

#4 If you hover over the default MFL main menu Reports > Rules for an example , you will see a blue line above the first of type li for sub sub menu items

you can apply your border color for that specific li using this

.myfantasyleague_menu ul ul li.has-sub li:first-of-type {border-color: */ insert color to match menu border used in theme */ } 

 

#5 Css format adjustment for your themes for the new Submit Lineup and Scoreboard scripts , place this in your global css file

/* Apply same CSS you have applied to the report-wrapper to these 2 divs */
#outerMFLScoreboardDiv,#lineup-form { 
    background-color: #1f1f1f;
    margin-bottom: 24px;
    border-radius: 4px;
    padding: 12px;
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
}


/* Apply this globally for all skins to format the custom lineups and custom scoreboard pages */
#outerMFLScoreboardDiv table{
    width:100%;
}
#outerMFLScoreboardDiv .MFLMainScoreboard td{
    padding:2px 0;
}
#outerMFLScoreboardDiv .MFLMainScoreboard td,#outerMFLScoreboardDiv #scoreboardHeader,#lineup-form span.reportnavigation,#MFLScoreboardLoading h3 {
    text-align:center
} 

 

#6 http://www03.myfanta...ODULE=MESSAGE13

I did a quick css color change to match the skin here for the scoreboard , its in the embedded stylesheet along with the css mentioned in #5


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#25 Shogun

Shogun

    Member

  • Members
  • PipPip
  • 10 posts
  • Gender:Male

Posted 07 June 2017 - 06:07 PM

Looks good TOS, thanks for doing that. I was able to make most of the changes on my test site except for the global js file.  So hopefully when Braven does that, it will take care of the alignment issues I still face on the Submit Lineup section - otherwise with these two add-ons this has turned into a solid mobile template for the community.

 

P.s TOS I like that you added the additional hsubmenu on your site.



#26 braven112

braven112

    Veteran

  • Members
  • PipPipPip
  • 1,173 posts
  • Location:mfladdons.com
  • Interests:Seatle Seahawks

Posted 07 June 2017 - 08:54 PM

ok braven , here is what i have......

Thanks TOS, I've made most of these changes. The scoreboard will take a little longer so I can make it work on all the color schemes. I'll try to get to that tomorrow.

MFLaddons.com, your home for MFL templates and graphics.

Visit MFL.football for a free mobile friendly MFL template.


#27 Shogun

Shogun

    Member

  • Members
  • PipPip
  • 10 posts
  • Gender:Male

Posted 07 June 2017 - 09:08 PM


/*   SKIN SPECIFIC SCOREBOARD COLORING
======================================= */
/* color link of populating text in boxscores box and current week in weekly navigation */
#MFLFantasyMatchupsUpdate,#MFLNFLMatchupsUpdate,.navWeekCurr,.MFLNFLLiveClock,.MFLLiveClock {color:#da3636}
/* border color for each fantasy and nfl box score table  */
.MFLGameTable,.MFLNFLGameTable{border-color:#333}
/* font color for boxscores winner arrow and pace score  */
.MFLGameLinks .MFLPaceScore,.MFLGameLinks .MFLWinMarker,.MFLGameLinks .MFLNFLWinMarker{color:#da3636}
/* hover and current state background opactity color for boxscores  */
#MFLBoxHolder td.matchupHilite,#MFLBoxHolder td.matchupHilite:hover{background:rgba(0,0,0,.5)}
#MFLBoxHolder td.matchupLolite:hover {background:rgba(255,255,255,.1)}
/* background and border color for the table that is holding the team - scoreboard title - scoring digits - records  */
.MFLMainScoreboard {background:#1d1d1d;border-color:#555}
/* background graident color for the banner area for scoreboard name  */
#MFLCenterTop{color:#fff;background: #da3636;}
/* franchise team names and nfl team names box background and text colors  */
#MFLRoadTeamName,#MFLHomeTeamName{color:#ddd;border-color:#222;background: #333333;background: -moz-linear-gradient(top,  #333333 1%, #666666 50%, #333333 99%);background: -webkit-linear-gradient(top,  #333333 1%,#666666 50%,#333333 99%);background: linear-gradient(to bottom,  #333333 1%,#666666 50%,#333333 99%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 );
}
/* background gradient for scoreboard scores digits  */
#MFLRoadScore span,#MFLHomeScore span {border-color:#222;background: #000000;background: -moz-linear-gradient(top,  #000000 0%, #333333 50%, #000000 100%);background: -webkit-linear-gradient(top,  #000000 0%,#333333 50%,#000000 100%);background: linear-gradient(to bottom,  #000000 0%,#333333 50%,#000000 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );}
/* color for horizontal lines in center of scoreboard scores digits  */
#MFLRoadScore span:before,#MFLHomeScore span:before{background:#000}
#MFLRoadScore span:after,#MFLHomeScore span:after{background:#555}
/* gradient colors for the small side boxes on each side of scores digit center lines  */
#MFLRoadScore span a:after,#MFLHomeScore span a:after,#MFLRoadScore span a:before,#MFLHomeScore span a:before{border-color:#222;background: #555}
/* border color for container holding scores digits  */
#MFLRoadScore,#MFLHomeScore{border-color:#333}
/* Franchise and Team records background and text color  */
#MFLRoadTeamRecord,#MFLHomeTeamRecord {color:#ddd;border-color:#333;background: #000000;background: -moz-linear-gradient(top,  #000000 0%, #333333 50%, #000000 100%);background: -webkit-linear-gradient(top,  #000000 0%,#333333 50%,#000000 100%);background: linear-gradient(to bottom,  #000000 0%,#333333 50%,#000000 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );}
/* color for scoring digits  */
#MFLRoadScore span a,#MFLHomeScore span a{color:#da3636}
/* P-YTP-PMR backgrounds and text coloring  */
.MFLMainScoreboard td.MFLScoreboardTitle {color:#ddd;border-color:#333;background: #000000;background: -moz-linear-gradient(top,  #000000 0%, #333333 50%, #000000 100%);background: -webkit-linear-gradient(top,  #000000 0%,#333333 50%,#000000 100%);background: linear-gradient(to bottom,  #000000 0%,#333333 50%,#000000 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );}
#MFLRoadPlayers,#MFLRoadYTP,#MFLRoadPMR,#MFLHomePlayers,#MFLHomeYTP,#MFLHomePMR {color:#ddd;border-color:#222;background: #333333;background: -moz-linear-gradient(top,  #333333 1%, #666666 50%, #333333 99%);background: -webkit-linear-gradient(top,  #333333 1%,#666666 50%,#333333 99%);background: linear-gradient(to bottom,  #333333 1%,#666666 50%,#333333 99%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 );}
/* table row background color for games over or currently playing  */
.rowGameOver {background:rgba(0,0,0,.5)}
.CurrentlyPlaying {background:rgba(218,165,62,.2)}
/* change colors for S.O.S td cells for matchups poor to great  */
.MFLTeamLineup td.oppRankGreatMatchup{background:#04B404;color:#000}
.MFLScoreboardLineups td.oppRankGoodMatchup{background:#01DF01;color:#000}
.MFLScoreboardLineups td.oppRankAvgMatchup{background:#FFFF00;color:#000}
.MFLScoreboardLineups td.oppRankPoorMatchup{background:#FF8000;color:#000}
.MFLScoreboardLineups td.oppRankBadMatchup{background:#FF0000;color:#000}
/* the small tooltip popup arrows shown when hovering actual and pace scores  */
#scoreboardTooltip:after {border-top-color:#555!important;}
#scoreboardTooltip.top:after{border-bottom-color:#555!important;}
#scoreboardTooltip table td {border:1px solid #111}

/*   Edit Scoreboard Base CSS for this skin
================================================ */
body #scoreboardTooltip {background-color:#000!important;border:2px solid #000;}
#MFLScoreboardContainer .report{background-color:#000!important;border-bottom:0}
#scoreboardTooltip table {border-spacing:1px!important}
#scoreboardTooltip table td {border:1px solid rgba(45,45,45,0.3)}
#scoreboardTooltip td table td{border:0}
#MFLScoreboardContainer .report {#000;border-width:2px;border-width:.125rem}
.MFLMainScoreboard .nflicon,.MFLGameLinks .nflicon {background:none;border:0}

Here is the CSS for the black and red scoreboard that TOS mentioned, you can use this for your other color schemes.



#28 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,405 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 08 June 2017 - 06:07 AM

i see both scripts revised and menu top border fixed ;)

 

here is the exact location of the html character encoding that is not UTF-8 , i think i had mentioned wrong area before

 

if footer message for space in empty li

<ul>
<li>&nbsp;</li>
<li><a href="http://%HOST%/%YEAR%/standings?L=%LEAGUEID%">Standings</a></li>
<li><a href="http://%HOST%/%YEAR%/options?L=%LEAGUEID%&O=101">Rankings</a></li>
<li><a href="http://%HOST%/%YEAR%/options?L=%LEAGUEID%&O=15">Schedule</a></li>
<li><a href="http://%HOST%/%YEAR%/live_scoring_summary?L=%LEAGUEID%&W=1">Live scoring</a></li>
</ul> 

 

I was curious about your container scaling below

@media (min-width: 768px){.container{width:750px}}
@media (min-width: 992px){.container{width:970px}}
@media (min-width: 1200px){.container{width:1170px}} 

 

instead of using these media queries , why not just add this to the stylesheet and remove the above ?

.container{max-width:1170px} 

this would scale to fit all desktop/device @ any screen width with no media queries needed at all


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#29 Shogun

Shogun

    Member

  • Members
  • PipPip
  • 10 posts
  • Gender:Male

Posted 08 June 2017 - 08:04 AM

I am happy to report, the submit lineup page is now properly aligned after these fixes.  B)



#30 braven112

braven112

    Veteran

  • Members
  • PipPipPip
  • 1,173 posts
  • Location:mfladdons.com
  • Interests:Seatle Seahawks

Posted 08 June 2017 - 09:45 AM

I was curious about your container scaling below

 

@media (min-width: 768px){.container{width:750px}}
@media (min-width: 992px){.container{width:970px}}
@media (min-width: 1200px){.container{width:1170px}} 

 

instead of using these media queries , why not just add this to the stylesheet and remove the above ?

.container{max-width:1170px} 

this would scale to fit all desktop/device @ any screen width with no media queries needed at all

 

 

Yeah either way would work.  I'm using bootstraps grid so that is why I structured it the way I did.  

 

One advantage of bootstraps system is that you only have 3 fixed width breakpoints for tablet, small desktop and large desktop.  That approach it makes it easier to predict how a page will look and shortens dev time.  I prefer this approach when you don't know exactly what modules will be added or how the grid will be used.  Doing responsive design well, can be hard and bootstraps system is relatively easy for folks to pick up.

 

http://getbootstrap.com/css/#grid

 

Bootstrap also provides a bunch of responsive utilities like the ability to hide and show content at certain breakpoints.  While you can still do all of that without the media queries on the container class, it just makes it easier to stick with the default bootstrap approach.

 

Here is one example:

/*Hides content on mobile*/
<div class="hidden-xs"></div>

http://getbootstrap....nsive-utilities

 

 

 

 


MFLaddons.com, your home for MFL templates and graphics.

Visit MFL.football for a free mobile friendly MFL template.




Reply to this topic



  



0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users