Ugly construct of spans embedded in a paragraph

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Ugly construct of spans embedded in a paragraph

gettimothy
Good day.

I am creating an Example Browser modeled on the Twitter Bootstrap work.

If my server is running (I turn it off when I am not at the office) you can see the work in progress here:  http://72.250.235.143/zurb

Under Browse Examples->(Menu icon top left corner)->Media->Basic Tool Tip

I am recreating the example of the Zurb Documentation here: https://foundation.zurb.com/sites/docs/tooltip.html#basic-tooltip

My problem is this construct: 

<p> some text  <span> popup info</span> continue the pragraph text </p>

I can do it, but it is not elegant:


renderExampleOn: html
html paragraph
with:[html text: 'The '.
html zurbSpan
beTooltip;
dataTooltip;
ariaHasPopup:'true';
dataDisableHover:'false';
tabIndex:1;
title:'Fancy word for a beetle.';
with:[html text: 'scarabaeus'].
].
html text: 'hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a '.
html zurbSpan
beTooltip;
dataTooltip;
ariaHasPopup:'true';
dataDisableHover:'false';
tabIndex:1;
title:'Fancy word for a beetle.';
with:[html text: 'circular space'].
html text: ' three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.'

Which I think you will agree is not elegant.

Can I use method variables for the zurbSpans and do a html render:foo ?

I will try that..brb



_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Ugly construct of spans embedded in a paragraph

Esteban A. Maringolo
2018-03-30 3:37 GMT-03:00 gettimothy <[hidden email]>:

> My problem is this construct:
>
> <p> some text  <span> popup info</span> continue the pragraph text </p>

> I can do it, but it is not elegant:

Well, you're not comparing apples with apples, because the required
html construct is more complex than that.

And it is something like this:
<p> some text <span data-tooltip aria-haspopup="true" class="has-tip"
data-disable-hover="false" tabindex="1" title="Fancy word for a
beetle.">popup info</span> continue the paragraph text </p>


Seaside can be very succinct for some cases, and extremely verbose in
others, what you can implement is something like zurbTooltip: aString,
that could  do something like

WAGenericTag>>#zurbTooltip: aString

  self
     beTooltip;
     dataTooltip;
     ariaHasPopup: true;
     dataDisableHover:'false';
     title: aString

 And then in your code you can do something like.

renderExampleOn: html

html paragraph with:[
    html text: 'The '.
    html zurbSpan
       zurbTooltip:'Fancy word for a beetle.';
       with:[html text: 'scarabaeus'].
     html text: 'hung quite clear of any branches, and, if allowed to
fall, would have fallen at our feet']

I don't know whether the options in zurbTooltip: are reasonable
defaults, but if they are then the code will be more compact.

Also I don't know if the tooltip can be applied to <span> tags or to
any tag (as in Bootstrap), I assumed the later otherwise you'd have to
implement zurbTooltip: in the proper subclass of WAGenericTag.



Esteban A. Maringolo
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Ugly construct of spans embedded in a paragraph

gettimothy
Thank you. I will explore that route tonight





---- On Fri, 30 Mar 2018 10:02:13 -0400 [hidden email] wrote ----
2018-03-30 3:37 GMT-03:00 gettimothy <[hidden email]>:

> My problem is this construct:
>
> <p> some text <span> popup info</span> continue the pragraph text </p>

> I can do it, but it is not elegant:

Well, you're not comparing apples with apples, because the required
html construct is more complex than that.

And it is something like this:
<p> some text <span data-tooltip aria-haspopup="true" class="has-tip"
data-disable-hover="false" tabindex="1" title="Fancy word for a
beetle.">popup info</span> continue the paragraph text </p>


Seaside can be very succinct for some cases, and extremely verbose in
others, what you can implement is something like zurbTooltip: aString,
that could do something like

WAGenericTag>>#zurbTooltip: aString

self
beTooltip;
dataTooltip;
ariaHasPopup: true;
dataDisableHover:'false';
title: aString

And then in your code you can do something like.

renderExampleOn: html

html paragraph with:[
html text: 'The '.
html zurbSpan
zurbTooltip:'Fancy word for a beetle.';
with:[html text: 'scarabaeus'].
html text: 'hung quite clear of any branches, and, if allowed to
fall, would have fallen at our feet']

I don't know whether the options in zurbTooltip: are reasonable
defaults, but if they are then the code will be more compact.

Also I don't know if the tooltip can be applied to <span> tags or to
any tag (as in Bootstrap), I assumed the later otherwise you'd have to
implement zurbTooltip: in the proper subclass of WAGenericTag.



Esteban A. Maringolo
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Ugly construct of spans embedded in a paragraph

BrunoBB

Hi,

How did you build this Lateral Menu ?


regards,

bruno


El 30/03/2018 a las 12:10, gettimothy escribió:
Thank you. I will explore that route tonight




---- On Fri, 30 Mar 2018 10:02:13 -0400 [hidden email] wrote ----
2018-03-30 3:37 GMT-03:00 gettimothy <[hidden email]>:

> My problem is this construct:
>
> <p> some text <span> popup info</span> continue the pragraph text </p>

> I can do it, but it is not elegant:

Well, you're not comparing apples with apples, because the required
html construct is more complex than that.

And it is something like this:
<p> some text <span data-tooltip aria-haspopup="true" class="has-tip"
data-disable-hover="false" tabindex="1" title="Fancy word for a
beetle.">popup info</span> continue the paragraph text </p>


Seaside can be very succinct for some cases, and extremely verbose in
others, what you can implement is something like zurbTooltip: aString,
that could do something like

WAGenericTag>>#zurbTooltip: aString

self
beTooltip;
dataTooltip;
ariaHasPopup: true;
dataDisableHover:'false';
title: aString

And then in your code you can do something like.

renderExampleOn: html

html paragraph with:[
html text: 'The '.
html zurbSpan
zurbTooltip:'Fancy word for a beetle.';
with:[html text: 'scarabaeus'].
html text: 'hung quite clear of any branches, and, if allowed to
fall, would have fallen at our feet']

I don't know whether the options in zurbTooltip: are reasonable
defaults, but if they are then the code will be more compact.

Also I don't know if the tooltip can be applied to <span> tags or to
any tag (as in Bootstrap), I assumed the later otherwise you'd have to
implement zurbTooltip: in the proper subclass of WAGenericTag.



Esteban A. Maringolo
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside



_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


Libre de virus. www.avast.com

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Ugly construct of spans embedded in a paragraph

gettimothy
Hi bruno

https://foundation.zurb.com/sites/docs/off-canvas.html


If you wan the source code, I am stashing occasional .mcz files for the project here:



Caveat...I am running with nginx ...the application does not use FileLibrary at the moment, so all the css, js and image files are on retrieved by nginx.

Here is my nginx.conf:


worker_processes  1;
error_log logs/error.log;
events {
    worker_connections 1024;
}
http {
    include    mime.types;
    upstream database {
       postgres_server 127.0.0.1 dbname=[DATABASENAME] user=[USERNAME] password=[PASSWORD];
    }
    server {
        listen 80;
        server_name [IP ADDRESS];

        location / {
            root  [PATH TO YOUR ZURB FOUNDATION FILES]/public_html/zurb;
            default_type text/html;

        }
        location /css {
            root  [PATH TO YOUR ZURB FOUNDATION FILES]/public_html/zurb;
            default_type text/css;
            add_header Content-Type: text/css;
        }

        location /js {
            root  [PATH TO YOUR ZURB FOUNDATION FILES]/public_html/zurb;
            default_type application/javascript;
            add_header Content-Type: application/javascript;
        }
        location /images {
            root  [PATH TO YOUR ZURB FOUNDATION FILES]/public_html/zurb;
            default_type  image/svg+xml;
            add_header Content-Type: image/svg+xml;
        }

        location /debug {
            echo "uri=$uri";
            echo "request_uri=$request_uri";
            echo "name: $arg_name";
        }

        location /SeasideDock {
            proxy_pass http://127.0.0.1:8080;
            include       mime.types;
        }

        location /zurb {
            proxy_pass http://127.0.0.1:8080;
        }
        location /zurbhack {
            proxy_pass http://127.0.0.1:8080;
        }

        location /browse {
            proxy_pass http://127.0.0.1:8080;
        }
        location /config {
            proxy_pass http://127.0.0.1:8080;
        }
    }
}



cheers

t


---- On Fri, 30 Mar 2018 16:54:34 -0400 Smalltalk <[hidden email]> wrote ----

Hi,

How did you build this Lateral Menu ?


regards,

bruno


El 30/03/2018 a las 12:10, gettimothy escribió:
Thank you. I will explore that route tonight




---- On Fri, 30 Mar 2018 10:02:13 -0400 [hidden email] wrote ----
2018-03-30 3:37 GMT-03:00 gettimothy <[hidden email]>:

> My problem is this construct:
>
> <p> some text <span> popup info</span> continue the pragraph text </p>

> I can do it, but it is not elegant:

Well, you're not comparing apples with apples, because the required
html construct is more complex than that.

And it is something like this:
<p> some text <span data-tooltip aria-haspopup="true" class="has-tip"
data-disable-hover="false" tabindex="1" title="Fancy word for a
beetle.">popup info</span> continue the paragraph text </p>


Seaside can be very succinct for some cases, and extremely verbose in
others, what you can implement is something like zurbTooltip: aString,
that could do something like

WAGenericTag>>#zurbTooltip: aString

self
beTooltip;
dataTooltip;
ariaHasPopup: true;
dataDisableHover:'false';
title: aString

And then in your code you can do something like.

renderExampleOn: html

html paragraph with:[
html text: 'The '.
html zurbSpan
zurbTooltip:'Fancy word for a beetle.';
with:[html text: 'scarabaeus'].
html text: 'hung quite clear of any branches, and, if allowed to
fall, would have fallen at our feet']

I don't know whether the options in zurbTooltip: are reasonable
defaults, but if they are then the code will be more compact.

Also I don't know if the tooltip can be applied to <span> tags or to
any tag (as in Bootstrap), I assumed the later otherwise you'd have to
implement zurbTooltip: in the proper subclass of WAGenericTag.



Esteban A. Maringolo
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside



_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside 


Libre de virus. www.avast.com
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside




_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside