XF1.x [ITM] c't Shariff Social Buttons 3.0.1

[rugk]

Übrigens scheint irgendein Javascript oder so den Wert von min-width zu ändern: In der Desktopansicht liegt er bei 1px und in der Mobilansicht bei 35px. - nur 35px sind offensichtlich mit dem Zähler noch zu wenig.

 

[McAtze]

Ich habe schon eine Idee. Würde gerne vorher mit dir testen, ist das OK?
Weil ich kein Board mit den Button UND Zähler habe ..

 

[rugk]

Ja okay, solange es nur ein paar kleine Änderungen sind.

 

[McAtze]

Nur eine kleine Änderung ..
Dafür musst du den Debug Modus anmachen, damit du die TMS share_page.css bearbeiten kannst.

 

[rugk]

Okay, was soll ich bearbeiten?

 

[McAtze]

Einmal bitte das "Ersetze:"-Feld komplett mit dem folgenden Code ersetzen...

$0
@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive .sharePage
    {
        display: inline !important;
    }

    .Responsive .shariff .orientation-horizontal li
    {
        {xen:if {$xenOptions.itm_ctSSB_enable_sharePage.ctSSB_Count}, min-width: 65px !important, min-width_: 35px !important};
        min-width: 35px !important;
        -webkit-flex: none !important;
        -ms-flex: none !important;
        flex: none !important;
    }
}

 

[rugk]

So gemacht und jetzt sind die Buttons in der Mobilansicht (wieder) ganz weg...

 

[McAtze]

Dann probiere mal bitte den Code aus ..

$0
@media only screen and (min-width:360px)
{
    .Responsive .sharePage
    {
        display: inline !important;
    }

    .Responsive .shariff .orientation-horizontal li
    {
        <xen:if is={$xenOptions.itm_ctSSB_enable_sharePage.ctSSB_Count}>
            min-width: 65px !important;
        <xen:else />
             min-width: 35px !important;
        </xen:if>
       
        -webkit-flex: none !important;
        -ms-flex: none !important;
        flex: none !important;
    }
}

 

[Alluidh]

Dafür musst du den Debug Modus anmachen, damit du die TMS share_page.css bearbeiten kannst.

Geht das nicht auch?
http://www.xendach.de/resources/tms-button-wiederherstellen.54/

 

[rugk]

Immer noch das gleiche Ergebnis...

 

[Lemminator]

ich mach das damit @Alluidh https://xenforo.com/community/resources/enable-debug-mode-from-admincp.1356/

 

[Alluidh]

@Lemminator
Ich möchte in so einem Fall nur das TMS, nicht den kompletten Debug Modus

 

[McAtze]

@rugk So ein letzter Versuch erstmal ..

$0
@media only screen and (min-width:360px)
{
    .Responsive .sharePage
    {
        display: inline !important;
    }

    .Responsive .shariff .orientation-horizontal li
    {
        min-width: 35px !important;
       
        -webkit-flex: none !important;
        -ms-flex: none !important;
        flex: none !important;
    }
}

 

[rugk]

Da sieht es dann so aus:


Wobei ich den Versuch nicht verstehe - da steht ja nix mit 65px drinne. Auch nur 35px.

 

[rugk]

Äh und wie lautet der Standard-Code?

 

[McAtze]

Wobei ich den Versuch nicht verstehe - da steht ja nix mit 65px drinne. Auch nur 35px.

Oh sorry, war zu schnell sollte 65px statt 35px heißen ..

Äh und wie lautet der Standard-Code?

Probiere nochmal mit 65px, bis dahin ist mir der Original Code wieder eingefallen ..

 

[rugk]

So sieht es jetzt aus:

 

[McAtze]

Danke für deine Hilfe. Ich werde mal daran arbeiten ..

Den original Code hab ich verloren ..

Spoiler: Such mich

$0
.shariff .orientation-horizontal li {min-width: 1px !important;}

@media (max-width:@nonResponsiveMinWidth)
{
.Responsive .shariff ul.theme-standard.orientation-horizontal {display: inline !important;}
.Responsive .shariff .orientation-horizontal li {min-width: 35px !important; -webkit-flex: none !important; -ms-flex: none !important; flex: none !important;}
}

@media (max-width:@maxResponsiveWideWidth)
{
.Responsive .shariff ul.theme-standard.orientation-horizontal {display: inline !important;}
.Responsive .shariff .orientation-horizontal li {min-width: 35px !important; -webkit-flex: none !important; -ms-flex: none !important; flex: none !important;}
}

@media (max-width:@maxResponsiveMediumWidth)
{
.Responsive .shariff ul.theme-standard.orientation-horizontal {display: inline !important;}
.Responsive .shariff .orientation-horizontal li {min-width: 35px !important; -webkit-flex: none !important; -ms-flex: none !important; flex: none !important;}
}

@media (max-width:@maxResponsiveNarrowWidth)
{
.Responsive .sharePage {display: inline !important;}
.Responsive .shariff .orientation-horizontal li {min-width: 35px !important; -webkit-flex: none !important; -ms-flex: none !important; flex: none !important;}
}

 

[Lemminator]

das wäre es original (Feld ersetzen)

Spoiler: original :)

$0
@media (max-widthnonResponsiveMinWidth)
{
.Responsive .shariff ul.theme-standard.orientation-horizontal {display: inline;}
}

@media (max-widthmaxResponsiveWideWidth)
{
.Responsive .shariff ul.theme-standard.orientation-horizontal {display: inline;}
}

@media (max-widthmaxResponsiveMediumWidth)
{
.Responsive .shariff ul.theme-standard.orientation-horizontal {display: inline;}
}

@media (max-widthmaxResponsiveNarrowWidth)
{
.Responsive .sharePage {display: inline !important;}
.Responsive .shariff .orientation-horizontal li {min-width: 1px;}
}

 

[rugk]

@Lemminator
Die Version sieht auch schön aus...

Übrigens habe ich es gerade nochmal auf eigene Faust probiert und siehe an ich habe eine Lösung. Dies ist der richtige Code:

$0
.shariff .orientation-horizontal li {min-width: 1px !important;}

@media (max-width:@nonResponsiveMinWidth)
{
.Responsive .shariff ul.theme-standard.orientation-horizontal {display: inline !important;}
.Responsive .shariff .orientation-horizontal li {min-width: 65px !important; -webkit-flex: none !important; -ms-flex: none !important; flex: none !important;}
}

@media (max-width:@maxResponsiveWideWidth)
{
.Responsive .shariff ul.theme-standard.orientation-horizontal {display: inline !important;}
.Responsive .shariff .orientation-horizontal li {min-width: 65px !important; -webkit-flex: none !important; -ms-flex: none !important; flex: none !important;}
}

@media (max-width:@maxResponsiveMediumWidth)
{
.Responsive .shariff ul.theme-standard.orientation-horizontal {display: inline !important;}
.Responsive .shariff .orientation-horizontal li {min-width: 65px !important; -webkit-flex: none !important; -ms-flex: none !important; flex: none !important;}
}

@media (max-width:@maxResponsiveNarrowWidth)
{
.Responsive .sharePage {display: inline !important;}
.Responsive .shariff .orientation-horizontal li {min-width: 65px !important; -webkit-flex: none !important; -ms-flex: none !important; flex: none !important;}
}

Und was ich gemacht habe ist auch ganz einfach: Ich habe den Original-Code genommen und einfach alle Vorkommnisse von 35 mit 65 ersetzt und schon sieht es schön aus.