Jump to content


Photo

Mobile friendly template...

html css js template

161 replies to this topic

#151 grooves12

grooves12

    Veteran

  • Members
  • PipPipPip
  • 47 posts

Posted 21 August 2019 - 06:44 PM

Any way to just get the header and footer to work in conjunction with the stock MFL scripts and modules?



#152 braven112

braven112

    Veteran

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

Posted 21 August 2019 - 07:44 PM

It works but the homepage won't be mobile friendly.

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

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


#153 mkuter

mkuter

    Newbie

  • Members
  • Pip
  • 2 posts

Posted 05 September 2019 - 11:12 AM

Hi Braven, we setup our league with the Mobile friendly template and love it. I have a question though, is there a way to get it to work with the tabbed trade roster setup found here - http://forums.myfant...ic=35563&page=1 ? 

 

Here is my site - http://www75.myfanta...2019/home/25630

 

What happens is when you go to the trade window and click on any team name (as an owner) it doesn't bring up the rosters and only displays your own roster. Is there something I might be missing or something that might help rectify this? 

 

Thanks

Mike

 

EDIT: Nevermind I got it. I forgot to use the custom HPN Template around the Trade Tabs. Works great!



#154 pclivingood

pclivingood

    Veteran

  • Members
  • PipPipPip
  • 72 posts

Posted 07 September 2019 - 11:04 AM

I use the Live Scoreboard. Last year I noticed the scoreboard was displaying in a problematic way of narrow screens. I found by adding a simple line to my header file, it made the fix. It is possible other people are having the same issue.

 

Code. Wrap in <style> and </style>

 

 

#outerMFLScoreboardDiv .MFLMainScoreboard tbody{width: 100%;display: table;} 
 

Before fix:

 

p.jpeg?fv_content=true&size_mode=5

 

After fix:

p.jpeg?fv_content=true&size_mode=5



#155 pclivingood

pclivingood

    Veteran

  • Members
  • PipPipPip
  • 72 posts

Posted 07 September 2019 - 12:00 PM

One issue I still see has to do with the add/drop page. I am not sure how much of this is MFL, how much is custom code, and how much is the Mobile Template. I am hoping someone can point me in the right direction.

 

 

 

Below is a picture of the Add/Drop page with a player selected. There are several issues with the bottom of the screen. 

The most pressing and confusing is that the checkbox is supposed to trigger "Don't do add/drop immediately, instead submit it as a waiver claim." But because the checkbox and that text are so far away, and because that text is close to the red button,  I have had owners get confused about whether they are making a blind bid waiver for later or a FCFS transaction now. In an ideal world I would see "To Add" and the player right next next to each other. I would see the checkbox right next to "Don't do add/drop immediately, instead submit it as a waiver claim", and I would move the Perform Add/Drop button to the middle of the screen.

 

A secondary issue is that I realized this page is not very responsive on smaller screens.

 

Advice and suggestions welcome.

 

p.jpeg?fv_content=true&size_mode=5



#156 grooves12

grooves12

    Veteran

  • Members
  • PipPipPip
  • 47 posts

Posted 11 September 2019 - 09:51 AM

I made some modifications to this template so that I could use MFLs default tabbed navigation:

 

I added the responsive code from the All American template here: http://forums.myfant...showtopic=35527

 

/*  START MFL RESPONSIVE DESIGN
================================ */

@media only screen and (max-width:89.625em){
#vsubmenu{display:none;}
#withmenus.withleft{margin-left:0!important}
}

@media only screen and (max-width: 70.000em) {
#hsubmenu ul li a{padding: 3px 8px;padding: 0.1875rem .5rem;}
}

@media only screen and (max-width: 64.000em) {
html{background-image:none;}
.pagebody {border:0;box-shadow:none;padding: 10px 2px 10px 2px;padding: 0.625rem 0.125rem 0.313rem 0.125rem;}
html{padding:0;margin:0;}
body{padding:0;border:0;border-radius:0;margin:0;}
.pagetitle h1 {margin:0;}
}

@media only screen and (max-width: 62.500em) {
#homepagecolumn1,#homepagecolumn2,#homepagecolumn3,#homepagecolumn4,homepagecolumn5,homepagecolumn6,.two_column_layout,table.h2hmatchups,table.scoresummary,.mobile-view {width:100%!important;float:left;} 
#body_live_scoring_summary div[align="center"], #body_live_scoring div[align="center"]{width:100%!important;overflow:hidden;}
.homepagecolumn {padding-right:0;}
table.two_column_layout .two_column_layout,table.report td.two_column_layout {padding-right:0;}
#body_player td[width="33%"],#body_player td[width="67%"],div#options_82.pagebody td.two_column_layout {float:left;width:100%;}
.homepagetabcontent > table[align="center"] > tbody:nth-child(1) > tr:nth-child(1) > td[valign="top"]  {width:100%;float:left;padding-right:0;}
}

@media only screen and (max-width:54.250em){
#hsubmenu{display:none;}
}

@media only screen and (max-width:48.000em){
#body_options_01 #weeklyResultsDiv {display:none;}
#body_options_128 .report td img{max-width:80px;max-width:5.000rem;height:100%;}
input[type=checkbox]{-ms-transform: scale(1.5);-moz-transform: scale(1.5);-webkit-transform: scale(1.5);-o-transform: scale(1.5);margin:5px 11px;margin:0.313rem 0.688rem;}
}

@media only screen and (max-width: 41.688em) {
.pagebody input,select,textarea {font-size:16px;font-size:1rem;}
.pagebody{min-height:500px;min-height:31.250rem}
#withmenus.withleft{min-height:0;}
select {}
.pagetitle h1 {font-size:26px;font-size:1.625rem;}
.welcome {text-align: center;}
}

@media only screen and (max-width:35.500em){
#body_options_128 .report td img{max-width:140px;max-width:8.750rem;height:100%;}
#body_options_128 .report th{display:none;}
#body_options_128 .report td{display:block;text-align:left;margin:0 auto;}
img.articlepicture {max-width: 120px;max-width: 7.500rem;}
#body_live_scoring_summary h2, #body_live_scoring h2 {font-size:16px;font-size:1.000rem;}
#body_live_scoring_summary #restart_refresh h2, #body_live_scoring #restart_refresh h2 {font-size:17px;font-size:1.063rem;}
.pagetitle h1 {font-size:20px;font-size:1.250rem;}
}

/*  DRAFT PAGE
======================================== */
@media only screen and (max-width: 55em) {
	.mobile-view-draft {width: 100%!important;float: left;}
}


 

I commented out two sections on the MFL Addons template. In the "MFL Resposive Tabs" section:

 

/****************************************************************

  height: auto;
  line-height: 1rem;

****************************************************************/

 

In the "MFL Resposive Tabs Mobile Style" section:

 

/**********************************************************

  .myfantasyleague_tabmenu ul#homepagetabs {
    padding: 0;
    list-style: none;
    white-space: nowrap;
    text-align: left;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    display: none; }

************************************************************/

 

Here is a demo site:

http://www77.myfanta...19/home/26840#0



#157 grooves12

grooves12

    Veteran

  • Members
  • PipPipPip
  • 47 posts

Posted 11 September 2019 - 12:59 PM

One more addition to CSS from theohiostate earlier in this thread cleans up the format of the modules when using tabbed format (I already updated demo site to include this):

 

/***************************************/
/*       oragnize css below            */
/***************************************/
#homepagecolumns{width:100%;table-layout:fixed}
#container-wrap{padding:10px}
.mobile-view{width:50%}
.homepagecolumn,.mobile-view{vertical-align:top;padding-right:15px}
.homepagecolumn:last-child,.mobile-view:last-child{padding-right:0}
img{vertical-align:middle}
.bannerimage{margin:0 auto;width:100%;}
.bannerimage img,.leaguelogo{max-width:100%;}
.welcome{white-space:nowrap;position:absolute;padding:5px;right:0;text-align:right;margin:0 auto;width:100%;}
.brandlogo{display:none;}
.pagetitle h1{font-size:30px;width:100%;margin:20px 0}


/***************************************/
/*          RESPONSIVE STYLE           */
/***************************************/
@media only screen and (max-width:48.000em) {
#body_player td[width="33%"],#body_player td[width="67%"]{width:100%}
.mobile-view,.homepagecolumn{width:100%;float:left;margin-top:0;padding:0!important} /* float and make all reports and table flow into a single column */
.weekly-navbar .reportnavigationheader{display:block;padding-right:0}




#158 pclivingood

pclivingood

    Veteran

  • Members
  • PipPipPip
  • 72 posts

Posted 11 September 2019 - 04:15 PM

grooves, could you send link to an example to see what this all looks like?

 

Nevermind, I see you provided a link. Looks good!



#159 braven112

braven112

    Veteran

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

Posted 11 September 2019 - 09:31 PM

Nice work Grooves!  I'll see if I can get this added to all the templates sometime in the next week or two.


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

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


#160 grooves12

grooves12

    Veteran

  • Members
  • PipPipPip
  • 47 posts

Posted 12 September 2019 - 09:17 AM

Nice work Grooves!  I'll see if I can get this added to all the templates sometime in the next week or two.

 

Thanks. Everything i did was trial and error. The only change I would like would be for the "League Tabs" header to be colored to match the themes in the mobile view, but I couldn't figure it out. 

 

Any way you might be able to implement that?



#161 grooves12

grooves12

    Veteran

  • Members
  • PipPipPip
  • 47 posts

Posted 12 September 2019 - 02:03 PM

One issue I still see has to do with the add/drop page. I am not sure how much of this is MFL, how much is custom code, and how much is the Mobile Template. I am hoping someone can point me in the right direction.

 

 

 

Below is a picture of the Add/Drop page with a player selected. There are several issues with the bottom of the screen. 

The most pressing and confusing is that the checkbox is supposed to trigger "Don't do add/drop immediately, instead submit it as a waiver claim." But because the checkbox and that text are so far away, and because that text is close to the red button,  I have had owners get confused about whether they are making a blind bid waiver for later or a FCFS transaction now. In an ideal world I would see "To Add" and the player right next next to each other. I would see the checkbox right next to "Don't do add/drop immediately, instead submit it as a waiver claim", and I would move the Perform Add/Drop button to the middle of the screen.

 

A secondary issue is that I realized this page is not very responsive on smaller screens.

 

Advice and suggestions welcome.

 

p.jpeg?fv_content=true&size_mode=5

 

 

MFL's Add/Drop page is a mess. The issues you mentioned aren't there on default template, but it is still pretty much unusable on mobile.

 

theohiostate reworked it to be responsive and mentioned MFL was working with him on posting the updates here: http://forums.myfant...=35486&p=191488

 

they are doing HTML fixes next week , they already reviewed about 100 different reports , also they will be redoing the new add/drop page with a new HTML i created for them

 

http://www03.myfanta...6&O=247&SEQNO=7

 

just cleaned up the HTML to match all other exiting reports throughout the site , cleaned up the select box area , added report classes and caption spans , made it responsive 

 

But, it was never implemented and I don't think he's shared the code (I can't find it on these forums).



#162 grooves12

grooves12

    Veteran

  • Members
  • PipPipPip
  • 47 posts

Posted 13 September 2019 - 12:56 PM

Braven,

 

You probably wanna include this fix from habman for the mobile lineup: http://forums.myfant...=10#entry198432





Reply to this topic



  



2 user(s) are reading this topic

0 members, 2 guests, 0 anonymous users