GSS Hangs using VFL - Githubissues

dcorbin commented 9 years ago

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 commented 9 years ago

@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 commented 9 years ago

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 commented 9 years ago

I just updated the second CodePen to display 2 rows.

gss / engine

GSS Hangs using VFL #182