Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GSS Hangs using VFL #182

Open
dcorbin opened this issue Apr 18, 2015 · 3 comments
Open

GSS Hangs using VFL #182

dcorbin opened this issue Apr 18, 2015 · 3 comments

Comments

@dcorbin
Copy link

dcorbin commented Apr 18, 2015

I had "mostly working layout". I've tried to convert it (slowly) to VFL, but I'm finding just using one VFL statement is causing the browser (Firefox, Safari & Chrome to hang).

The HTML file and the .GSS file are below.

---spike.html----

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/gss" href="spike.gss"/>

</head>
<body>
    <script src="https://s3-us-west-2.amazonaws.com/cdn.thegrid.io/gss/v2.0.0/v2.0.0/gss.js"></script>
    <script type="text/javascript">window.engine = new GSS(document, {"players": 3, "handSize": 5})</script>
    <div id="handArea">

        <div id="hand_1" class="hand">
            <div class="card">
            </div>
            <div class="card">
            </div>
            <div class="card">
            </div>
            <div class="card">

            </div>
        </div>
        <div id="hand_2" class="hand">
            <div class="card">
            </div>
            <div class="card">
            </div>
            <div class="card">
            </div>
            <div class="card">
            </div>
        </div>
    </div>
</body>
</html>

spike.gss

#handArea {
    top: == 30;
    width: == .hand[width];
    bottom: == .hand:last[bottom] + 20;
    left: == 20;
}


#handArea {
    background-color: #aaffaa;
    border: solid 3px red;
}

.hand {
    bottom: == .card[bottom];
}

.card {
    width: >= 100;
    width: <= 150;
    height: == &[width] * 1.4;
    background-color: #aaaaaa;
    border: solid 2px black;
}

@h |(.hand .card)...| in(.hand) gap(30);
@paulyoung
Copy link
Contributor

@dcorbin I took the liberty of formatting your comment so that it displays properly in GitHub.

I created a CodePen using that same markup and GSS, and it doesn't hang.

Can you confirm that you're still having issues? If so it might be something to do with loading external stylesheets (in the CodePen I'm using a style tag).

I also forked that original CodePen and tried as best as I could to port everything to VFL (bearing in mind that I'm not sure what your intentions are here).

You can find that here.

@dcorbin
Copy link
Author

dcorbin commented Apr 20, 2015

Nope. It still hangs.

What I want to do is have 2 rows of 4 (much like the structure of the .html is). Well, in the long run, those numbers aren't fixed, but for that spike that was the goal. Logically, a .hand is one "view element". I want to write rules that describe the children of .hand relative to .hand. And then have other rules that describe the relationship of .hands (and other elements). Essentially modeling a "rich" UI where you have a classes representing different views in a hierarchy.

@paulyoung
Copy link
Contributor

I just updated the second CodePen to display 2 rows.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@paulyoung @dcorbin